JSFiddle - React, Tailwind, and code Playground

by rodneyrehm

HTML

<div id="container">
    <img id="image" src="http://jsfiddle.net/img/logo.png" alt="">
</div>

JavaScript

// delegated bubbles
$(document).on('error', '*', function(e) {
    $('<p>delegated error on ' + this.nodeName + '</p>')
        .appendTo(document.body);
});

// specifically bound
$('#image').on('error', function(e) {
    $('<p>bound error on img</p>')
        .appendTo(document.body);
});
$('container').on('error', function(e) {
    $('<p>bound error on img</p>')
        .appendTo(document.body);
});
$(document.body).on('error', function(e) {
    $('<p>bound error on img</p>')
        .appendTo(document.body);
});

// delegated capture
document.addEventListener('error', function(e) {
    $('<p>captured error on ' + this.nodeName + '</p>')
        .appendTo(document.body);
}, true);
document.getElementById('container').addEventListener('error', function(e) {
    $('<p>bound capture error on ' + this.nodeName + '</p>')
        .appendTo(document.body);
}, true);

$('#image').attr('src', '/dontexist.jpg');