Question

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

它看起来像这样：

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

我怎样才能在纯现代JavaScript中做同样的事情，即使HTML是动态改变的呢？

我知道我可以执行document.querySelector('input:checkbox')之类的操作并将事件监听器应用于每个单独的元素，但如果添加了新的input:checkbox，那么它将不具有与其他输入相同的事件监听器＃39; s。

Answer 1

您将听众附加到document（该部分相同），接受事件参数（让我们称之为e）并使用{{3在e.target上确定事件是否通过与选择器匹配的元素传递：

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

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

＆＃13;

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);

＆＃13;

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

＆＃13;

Element#closest相当新，但存在于所有现代浏览器中（因此，不是IE）。但是你可以在IE上填充它;请参阅Element#closest获取polyfill。

你可以给自己一个实用功能，它可以很容易地有效地执行jQuery的on委托版本：

＆＃13;

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);

＆＃13;

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

＆＃13;

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');
});

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

2 个答案: