Question

我的代码的重要部分：

window.onload = function(){
    function someFunction(){
        [].forEach.call(
            document.querySelectorAll('.button'),
            function(btn){
                btn.onclick = console.log("I BEEN CLICKED!!");
            }
        );  
    }

    someFunction()

};

当点击加载时存在的每个someFunction时，

console.log .button打印“我已点击”。

如何将此扩展为适用于稍后使用纯JavaScript（无jQuery）添加的新附加.button元素？

Answer 1

事件不会添加到将来的元素中，只会添加到目前为止查询过的元素。您应该使用事件委派：

document.addEventListener('click', function(e) {
  if (e.target.matches('.button')) {
    console.log('I have been clicked')
  }
})

这将适用于将来的按钮，因为您正在捕获整个文档的单击，但只有在通过单击与.button选择器匹配的目标触发事件时才会响应。

在某些旧版浏览器matches中有前缀，但您可以grab a polyfill。

Answer 2

当您使用querySelectorAll时，您将获得一个包含按钮类的当前元素的列表，并将事件附加到它。添加新元素时，它们不会自动获取事件侦听器。您必须在追加时重新运行该函数，或者只是向附加项添加相同的事件。

Answer 3

正如@EvanMosseri所说，无论何时添加新按钮，都可以手动调用它。但那是蹩脚的，所以这样做：

document.body.addEventListener('DOMNodeInserted',function(){
    someFunction();
}

将所有内容放在window.onload处理程序

中编辑：@ elclanrs的方式可能比这更好，但这种方式应该仍然可行，所以我会把它留在这里

`onclick`不适用于新添加的项目

3 个答案: