Get Id Of Clicked Element Without Putting Any Js Code In The Html

I need to get the ID of an element that was clicked, but I need to to keep all my js and html separate. normally id just use 'this.id' in the html. Any other ways?

Solution 1:

This is what e.target is for. You can add an event listener anywhere you want, as long as the click event is allowed to bubble up to it (which happens by default) you can catch it. A basic example:

document.addEventListener('click', function(e) {
    alert(e.target.id);
});

Clicking on each will alert its id. Hope this helps :)

<button id="foo">foo</button>
<button id="bar">bar</button>
<button id="baz">baz</button>

EDIT

http://jsfiddle.net/95NZ8/

Solution 2:

Try something like this:

$(document).ready(function () {
    $("#someWrapper").each(function () {
        $(this).on('click', function () {
            alert(this.id);
        });
    });
});

Solution 3:

window.onclick = e => {
    console.log(e.target.id);
}

to get element, tagname, classname , other attributes

window.onclick = e => {
    console.log(e.target);
    console.log(e.target.tagName);
    console.log(e.target.className);
    console.log(e.target.id);
}