demo jquery event: e.target vs e.currentTarget vs this

by Laurens Maneschijn

HTML

<div id="outside">
	outside
	<span id="inside">inside</span>
</div>

<pre>
e.currentTarget : element that event handler was attached to
e.target : element that event happened on (can be an element inside the former)
this : == e.currentTarget
</pre>

<textarea></textarea>

CSS

div, span {
	display:inline-block;
	margin:10px;
	padding:10px;
	border:2px outset #888;
	background: rgba(100,100,100,0.5);
	cursor: pointer;
}
textarea{
	width:100%;
	height:100px;
}

JavaScript

function log(line){
	console.log.apply(this, arguments);
	$('textarea').val( $('textarea').val() + '\n' + line);
}
$(document.body).on('click', '#outside', function(e){
  $('textarea').val('');
	log( '---click---') ;
	log( 'this            : ' + $(this).attr('id') );
	log( 'e.target        : ' + $(e.target).attr('id') );
	log( 'e.currentTarget : ' + $(e.currentTarget).attr('id') );
	console.log(e);
});