A possible solution could be to list all resources using window.performance.getEntriesByType("resource"), then try to download each of them using ajax to see if it produces a 404. However there are 2 major drawbacks to consider:

• this isn't an event listener, you have to execute the check after a reasonable amout of time to let the browser load all resources, or execute it periodically;
• you must avoid to check for dynamic resources which could return a different result from the previous call, or the more dangerous case where a call to a resource produces an update of the data on the remote server (a very trivial example could be a view counter on an image);
• there is a chance that the ajax call results in different status code even if the resource is static, for example if the client is on an unstable network and the connection goes down between the two calls.

Anyway here is a starting point:

window.onload = function() {
    setTimeout(function() {
        var resources = window.performance.getEntriesByType("resource");
        resources.forEach(function (resource) {
            $.get(resource.name).fail(function(e) {
                var msg = 'Failed to load resource '+resource.name+' requested by '+resource.initiatorType;
                var div = $('<div/>').text(msg);
                $('body').append(div);
            });
        });
    }, 1000);
};

body {
    background-image: url('bar.jpg');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<img src="foo.jpg"/>