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

Question

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

它看起来像这样:

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

如何在纯现代 JavaScript 中完成同样的事情，即使 HTML 动态更改也能正常工作？

我知道我可以执行类似 document.querySelector('input:checkbox') 的操作，并将事件监听器应用于每个单独的元素，但是如果有一个新的 input:checkbox > 添加后，它将不会具有与其他输入相同的事件监听器。

Answer 1

您可以将监听器附加到 document(该部分是相同的)，接受事件参数(我们称之为 e)并使用 Element#closest在 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("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 上填充它；请参阅linked MDN article用于填充。

您可以给自己一个实用函数，它可以轻松有效地完成 jQuery 的委托(delegate)版本 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>