Javascript `onclick`donds'；不适用于新添加的项目

我的代码的重要部分是：

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

    someFunction()

};

someFunction

的

控制台。当单击加载时存在的每个
按钮时，log
打印“我被单击”

如何将其扩展到新添加的
.button
元素，这些元素稍后仅使用纯JavaScript（无jQuery）添加？
使用querySelectorAll时，您将获得一个包含button类的当前元素列表，并向其附加一个事件。添加新元素时，它们不会自动获取事件侦听器。无论何时向附加项追加或仅向附加项添加相同的事件，都必须重新运行该函数
 当您使用querySelectorAll时，您将获得button类的当前元素列表，并将事件附加到其中。添加新元素时，它们不会自动获取事件侦听器。无论何时向附加项追加或仅向附加项添加相同的事件，都必须重新运行该函数
 正如@EvanMosseri所说，只要在添加新按钮时手动调用即可。但这是站不住脚的，所以这样做：

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

并将所有这些都放在
窗口中。onload
处理程序

编辑：@elclanrs的方法可能比这更好，但这种方法应该仍然有效，所以我将它留在这里
正如@EvanMosseri所说，只要在添加新按钮时手动调用它即可。但这是站不住脚的，所以这样做：

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

并将所有这些都放在
窗口中。onload
处理程序

编辑：@elclanrs的方法可能比这更好，但这种方法应该仍然有效，因此我将把它留在这里
事件不是为将来的元素添加的，只是您迄今为止查询过的元素。您应该使用事件委派：

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

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

在一些旧浏览器中，
matches
是前缀，但您可以。
事件不会添加到将来的元素中，只添加到您目前为止查询过的元素中。您应该使用事件委派：

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

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

在一些旧浏览器中，
matches
是前缀，但您可以。
您可以使用事件委派。您可以使用事件委派。这非常低效，如果不在*

@minitech上设置

，则会多次添加事件侦听器是的，这很低效，但不应该添加多个侦听器，因为他使用的是
。onclick
，以及“未设置*

”时删除其所有先前值的设置。关键是它有一个隐藏的陷阱，很多*上的

会在以后变成
addEventListener
。这是非常低效的，如果不在*

@minitech上设置

，它会多次添加事件侦听器是的，效率很低，但它不应该添加多个侦听器，因为他使用的是
。onclick
，以及“未设置*

”时删除其所有先前值的设置。关键是它有一个隐藏的陷阱*s上的大量

将在以后成为
addEventListener
。@BhojendraNepal，看看编辑是否有帮助，还可以查看本教程。需要注意的是，这可能会在事件执行顺序方面引起一些意外。对于“一些”旧浏览器，你指的是除了最新的Chrome和Firefox之外的一切吗？@adeneo，在最新的Firefox、Chrome、Opera、Safari、iOS和Android上。但不确定
是否匹配
或
匹配选择器
，因为链接和描述说明不同。是的，它支持带前缀，就像在
webkitmachesselector
中一样，不带前缀的版本只在最新的Chrome和Firefox（我想可能还有一些Safari版本）@BhojendraNepal中受支持，查看编辑是否有帮助，同时查看本教程。需要注意的是，这可能会在事件执行顺序方面引起一些意外。所谓“一些”旧浏览器，您指的是除最新的Chrome和Firefox之外的所有浏览器？@adeneo，在最新的Firefox、Chrome、Opera、Safari、iOS和Android上。但不确定
是否匹配
或
匹配选择器
，因为链接和描述说明不同。是的，它支持带前缀，就像在
webkitmatcheselector
中一样，不带前缀的版本只在最新的Chrome和Firefox中受支持（我想可能还有一些Safari版本）