通过文档中JavaScript中的选择器将事件侦听器附加到所有元素

在jQuery中，您可以使用

.on（）

将事件侦听器添加到

文档中，并将选择器作为第二个参数，以侦听发送到特定元素的所有事件，即使HTML是动态更改的

它看起来像这样：

$(document).on('change', "input:checkbox", onCheckboxChange);

我如何在纯现代JavaScript中做同样的事情，即使HTML是动态更改的，它也能工作

我知道我可以做一些类似于
document.querySelector（'input:checkbox'）
的事情，并将事件侦听器应用于每个单独的元素，但是如果添加了一个新的
input:checkbox
，那么它将不会拥有与其他输入相同的事件侦听器。
您可以将侦听器附加到
document
（该部分相同）接受事件参数（我们称之为
e
），并在
e.target
上使用以确定事件是否通过与选择器匹配的元素：

document.addEventListener("change", function(e) {
    var target = e.target.closest("input[type=checkbox]");
    if (target) {
        // It matches
        console.log("change", target.checked);
    }
});

实时示例（包括在事实之后添加匹配元素）：


document.addEventListener（“更改”，函数（e）{
var target=e.target.closest（“输入[type=checkbox]”）；
如果（目标）{
//相配
console.log（“更改”，target.checked）；
}
});
setTimeout（函数（）{
document.body.insertAdjacentHTML(
“之前”，
“或勾选我”）；
}，800）；

勾选我
首先，我要创建一个复选框，然后将其附加到Dom中，并根据其Id向其添加事件侦听器

var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name";
checkbox.value = "value";
checkbox.id = "id";

document.body.appendChild(checkbox); 

var abc = document.getElementById('id');

abc.addEventListener("click", function () {
 alert('click');
});

据我所知，人们仍然使用
委托
/
。
@Pedram:OP的“纯现代JavaScript”意思是“纯现代DOM”（例如，不使用像jQuery这样的库）。遗憾的是，这是常用术语。当我说“纯现代JavaScript”时，我的意思是，不必担心支持任何类型的internet explorer，并且包括可能不是所有浏览器都超级支持的新javascript功能。还有，是的，我的意思是没有库）这本质上是对页面上的每个元素应用一个
change
事件，并过滤复选框输入？@acid:no，它与jQuery在委派时所做的完全相同：只向
文档
添加更改处理程序，当
更改
事件冒泡到
文档
时，它检查事件的目标或目标与
文档
之间的任何内容是否与选择器匹配，如果是，则运行
if
块中的逻辑。谢谢！这似乎是解决办法。