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

Question

在 jQuery 中，您可以使用带有选择器的 .on() 作为第二个参数将事件侦听器添加到document中，以侦听发送到特定元素的所有事件，即使 HTML 是动态更改的。

它看起来像这样：

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

我怎样才能在纯现代的JavaScript中做同样的事情，即使HTML被动态更改，它也能工作？

我知道我可以做一些类似 document.querySelector('input:checkbox') 的事情并将事件侦听器应用于每个单独的元素，但如果添加了新input:checkbox，那么它将不会具有与其他输入相同的事件侦听器。

Answer 1

您将侦听器附加到接受事件参数(我们称之为 e (document(该部分相同(并在 e.target 上使用 Element#closest 来确定事件是否通过与选择器匹配的元素传递：

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

实时示例(包括事后添加匹配元素(：

document.addEventListener("change", function(e) {
    var target = e.target.closest("input[type=checkbox]");
    if (target) {
        // It matches
        console.log("change", target.checked);
    }
});
setTimeout(function() {
  document.body.insertAdjacentHTML(
    "beforeend",
    "<div><label><input type='checkbox'> Or tick me");
}, 800);

<div>
  <label>
    <input type="checkbox"> Tick me
  </label>
</div>

Element#closest是相当新的，但存在于所有现代浏览器中(因此，不是IE(。不过，您可以在IE上填充它;请参阅链接的 MDN 文章以获取 polyfill。

你可以给自己一个实用程序函数，它有效地执行jQuery的委托版本on很容易做到的事情：

function addHandler(element, selector, eventName, handler) {
    if (typeof eventName === "undefined") {
        // No selector, swap things around
        eventName = selector;
        selector = undefined;
    }
    element.addEventListener(eventName, function(e) {
        var currentTarget = e.currentTarget;
        if (selector) {
            currentTarget = e.target.closest(selector);
            if (!currentTarget) {
                // Not a match, ignore
                return;
            }
        }
        // Note we use `currentTarget` as this during the call
        // Sadly, `currentTarget` on the actual event object is
        // read-only. We could create a synthetic event object
        // like jQuery does and set it on that instead.
        // I didn't do that here, but it's easy enough.
        return handler.call(currentTarget, e);
    });
    return element;
}
// Usage
addHandler(document, "input[type=checkbox]", "change", function(e) {
    console.log("changed", this.checked);
});
setTimeout(function() {
    document.body.insertAdjacentHTML(
        "beforeend",
        "<div><label><input type='checkbox'> Or tick me");
}, 800);

<div>
  <label>
    <input type="checkbox"> Tick me
  </label>
</div>

Answer 2

首先，我创建一个复选框，然后将其附加到 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');
});