myEvent.currentTarget in DOM Level 2 Events

The following (HTML-centric) example shows the difference between Event.currentTarget and Event.target:

<p id="para">
	Hello <b id="bold" style="padding:1em; background-color:yellow">World</b>
</p>
...
<script type="text/javascript">
	function SayWhoCaughtMe(evt){
		alert("target is :"+evt.target.id);
		alert("currentTarget is :"+evt.currentTarget.id);
	}
	document.getElementById('para').addEventListener('click',SayWhoCaughtMe,false);
</script>

In the above, if the user clicks in the yellow area around the word "World", the first alert will show 'bold'; evt.target refers to the top-most object which caught the event. The second alert will say 'para', as currentTarget always refers to the object to which the event handler was assigned.

Note that if the user clicks on the word "World" itself, or the word "Hello", the first alert may show 'undefined', as evt.target may refer to the Text node containing the text. (Safari behaves this way, while Mozilla does not support event trapping on Text nodes, instead always setting target to the parent node of any text.)

Unlike Event.target, there is no equivalent for the currentTarget property in Internet Explorer's event object.