在JavaScript中添加事件全局回调

Question

I want to add an onerror function on div.circle_thumb>img event.

Now, I'm added `onerror event each img tag like this.

<div class="circle_thumb" ><img src="some/url" onerror="this.src=url/to/replaced" /></div>

But this bothering me too much.

Can I add this callback globally?

Answer 1

You can use javascript like this

[].forEach.call(document.querySelectorAll('div.circle_thumb>img'), function(img) {
    img.addEventListener('error', function(e) {
    this.src='../img/logo.png';
  });
});

or in ES2015+

Array.from(document.querySelectorAll('div.circle_thumb>img')).forEach(img => img.addEventListener('error', e => img.src='../img/logo.png'));

Answer 2

jQuery version:

jQuery.each($('div.circle_thumb > img'), function(index, image){
    image.addEventListener('error', function(e) {
        image.src='../img/logo.png';
    });
});