I have html like below:

<div onclick=" callJavascript()">

<span id="abc"> abc </span>
<span id="def"> def </span>
<span id="ghi"> ghi </span>

</div>

When I click 'abc' or 'ghi', is there anywhere inside function callJavascript(), to find out which span id I clicked on ?

I have html like below:

<div onclick=" callJavascript()">

<span id="abc"> abc </span>
<span id="def"> def </span>
<span id="ghi"> ghi </span>

</div>

When I click 'abc' or 'ghi', is there anywhere inside function callJavascript(), to find out which span id I clicked on ?

• javascript
• jquery

5 Answers 5

Yes there is :

For Not IE browsers :

function callJavascript ( e ) {

    alert(e.target); // the DOMElement object
    alert(e.target.id); // the object's id

}

For IE :

function callJavascript ( e ) {

    alert(e.srcElement); // the DOMElement object
    alert(e.srcElement.id); // the object's id

}

You must nevertheless adapt your html :

<div onclick=" callJavascript(e)"> // replace "e" by "event" in IE.

<span id="abc"> abc </span>
<span id="def"> def </span>
<span id="ghi"> ghi </span>

</div>

If you want a more complete reference, here it is : http://www.quirksmode.org/js/events_properties.html

Wow ! May I mention, for better accuracy, your event listener should not be on the div element, instead, it may be triggered by the span elements themselves. The target or srcElement being the one on which the event occurs.

It's not part of the question, but it's worth saying : I usually prefer to avoid event attachment in html code since it causes scope problems and forces you, as in your case, to manually pass the event parameter.

You have to add the event param to your onclick listener to have the event accessible within your listener.

<div onclick="callJavascript(event)">

Then use the target or srcElement property to get the DOM element.

function callJavascript(e) {
    var target = e.srcElement || e.target;
    alert(target.id);
}

Working demo

You could use jquery as follows:

$(function() {
    $("span").click(function(e) {
        alert(this.id);
    }
});

See it in action here: http://jsfiddle.net/3KfyG/.

for get attributes or class:

<div class="foo" my_attr="foo2" onclick="callJavascript(event)">
function callJavascript(e) {
    var target = e.srcElement || e.target;    
    console.log(target.className);
    console.log(target.getAttribute('foo2'));
}

Look this link: http://krook.org/jsdom/HTMLParagraphElement.html

Try:

<script>
    function callJavascript() {
        alert(event.target.id);
    } 
</script>