javascript - forEach 方法不起作用

Question

HTML:

<input type="button" value="Start" id="start">

JavaScript:

var inp = document.querySelectorAll('.z1');

Array.prototype.forEach.call(inp, function(item, i, arr) {
      item[i].addEventListener('click', function() {
          alert('fsdfs');
      }, false);
});

document.getElementById('start').addEventListener('click',function() {
    var gg = '<input type="button" value="Button1" class="z1"><input type="button" value="Button2" class="z1">';
    document.body.insertAdjacentHTML('beforeEnd', gg);
});

这个想法是，当您点击插入正文中的 INPUT 时，应该触发警报。

Answer 1

Alert 不会为新元素触发，因为您从未将事件绑定(bind)到它们。而是将点击事件委托(delegate)给主体，它最终会在主体中冒泡:

document.body.addEventListener('click', function(e) {
    if (e.target.className == 'z1') {
        alert('fsdfs');
    }
}, false);

document.getElementById('start').addEventListener('click',function() {
    var gg = '<input type="button" value="Button1" class="z1"><input type="button" value="Button2" class="z1">';
    document.body.insertAdjacentHTML('beforeEnd', gg);
});

<input type="button" value="Start" id="start">

请记住，在委托(delegate)事件的情况下，您需要检查事件是否发生在正确的元素上。就像在演示中一样，您可以检查事件目标类名称。