Event logging mouse events, and this vs e.target vs e.currentTarget.

Event logging mouse events to show in what order events are fired, and showing different values for this, e.target, e.currentTarget, e.relatedTarget in event handler function.

by Laurens Maneschijn

HTML

Values of this, e.target, e.currentTarget etc. in jQuery event handler function:<br>
<div id="outer">
	outer
	<div id="inner1">
		inner 1
		<div id="inner2">
			inner 2
		</div>
	</div>
</div>

<form>
	<input type="reset"><br>
	e.type, this.id, e.currentTarget.id, e.target.id, e.relatedTarget.id:<br>
	<textarea id="textarea"></textarea>
</form>
<p>
	NB: Note that there are more possible targets and properties in for example `e.originalEvent.relatedTarget`.<br>
	Open console and collapse the logged event objects to explore.<br>
</p>

Related links:
<ul>
	<li><a target="_blank" href="https://api.jquery.com/on/">$ .on()</a>
	<li><a target="_blank" href="https://api.jquery.com/category/events/event-object/">$ Event object</a>
	<li><a target="_blank" href="https://api.jquery.com/category/events/">$ Events</a>
	<li><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Event">MDN Event object</a>
	<li><a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/Events/mouseover">MDN mouseover event</a>
</ul>

CSS

div {
	margin: 5px;
	padding: 5px;
	border: 1px dashed #000;
	background: rgba(128,128,128,0.5);
}
textarea {
	box-sizing: border-box;
	width: 100%;
	height: 200px;
	resize: both;
}

JavaScript

var logqueue = new LogQueue();
$(document).on(
	'mousedown mouseup click mouseover mouseout mouseenter mouseleave',
	'#outer',
	function(e){
		// various ways to log events:
		// NB: note that `this` is equal to `e.currentTarget` in jquery event handlers.

		textarea_log(this, e);

		console.log(e.type, this.id, e.currentTarget.id, e.target.id, e);

		logqueue.push({
			'e.type': e.type,
			'this.id': this.id,
			'e.currentTarget.id': e.currentTarget.id,
			'e.target.id': e.target.id,
			'event': e,
		});
	}
);

function fix(s, n){
	return (s+'          ').substr(0, n);
}
function textarea_log(this_, e){
//	var s = `${fix(e.type,10)}, ${fix(this.id,6)}, ${fix(e.target.id,6)}, ${fix(e.currentTarget.id,6)}`;
	var a = [];
	a.push(fix(e.type, 10));
	a.push(fix(this_.id, 10));
	a.push(fix(e.currentTarget.id, 10));
	a.push(fix(e.target.id, 10));
	a.push(fix(e.relatedTarget ? e.relatedTarget.id : '', 10));
	var ta = $('#textarea')[0];
	ta.value += a.join(' , ') + '\n';
	ta.scrollTop = 999999 + (ta.scrollHeight | 0);
}

// group chunks of logs together in a console.table() output.
// output after a second of no new events.
function LogQueue(){}
LogQueue.prototype.logs = [];
LogQueue.prototype.timeout = null;
LogQueue.prototype.delay = 1000;
LogQueue.prototype.push = function(log){
	this.logs.push(log);
	clearTimeout(this.timeout);
	this.timeout = setTimeout(this.update.bind(this), this.delay);
};
LogQueue.prototype.update = function(){
	console.groupCollapsed('logchunk');
	console.table(this.logs);
	console.groupEnd();
	this.logs = [];
};