JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<button id="dom">DOM attached</button>
<button id="jq">jQuery attached</button>
<pre>
Uncaught exception in event handler will prevent subsequent script executing

Chrome 26
jQuery 1.9.1

Click button "DOM attached", all 3 handlers will be called. Output:
<code>
jQuery 1
[Uncaught Error]
jQuery 2
</code>

Click button "jQuery attached", the last handler will not run. Output:
<code>
jQuery 1
[Uncaught Error]
</code>

IE attachEvent() has similar results, but only in an opposite execution order.
</pre>

JavaScript

function log(msg) {
	console.log(msg);
	$('<div>').text(msg).appendTo('body');
}
with ($('#dom')[0]) {
	addEventListener('click', function() {
		log('DOM 1');
	});
	addEventListener('click', function() {
		null.log('DOM 2'); // throw an exception
	});
	addEventListener('click', function() {
		log('DOM 3');
	});
}
$('#jq').click(function(e) {
	log('jQuery 1');
}).click(function(e) {
    try {
    	null.log('jQuery 2'); // throw an exception
    } catch ( e ) {
        console.error( e.message );
    }
}).click(function(e) {
	log('jQuery 3');
});