Capturing an element’s id with javascript click

Question

In the Document there are three <div>, all with the event onclick calling a function.

By clicking on any of the three, I would like to capture the id of the <div> clicked.

How can I capture the id of that element?

Answer 1

If you are using Javascript inline (as in <div id="a" onclick="f()">...), does not. You would need to pass the id on the function call itself. But using JS inline is contraindicated, not only because of this but also because it is a mixture of structure (HTML) and behavior (JS).

If you are creating the Javascript event manager, just use this.id:

var div = document.getElementById('seuid');
div.onclick = function() {
    alert(this.id); // alerta 'seuid'
} 
// OU:
div.addEventListener('click', function() {
    alert(this.id); // alerta 'seuid'
});

---

Considering your comment that clarifies that this is a menu with several clickable items: delegate the treatment of the event for a higher element in the hierarchy, and get the clicked item of the event object that is automatically passed to the Systener. Example:

<ul id="fora">
    <li id="dentro1">aaaaaa</li>
    <li id="dentro2">aaaaaa</li>
    <li id="dentro3">aaaaaa</li>
</ul>

var el = document.getElementById('fora');
el.addEventListener('click', function(e) {
    alert(e.target.id);
});

http://jsfiddle.net/3Uuv5/