如何从正文委托输入元素上的“更改”事件？

Question

我已经知道 jQuery 的事件委托。 但是，如何在没有 jQuery 的情况下使用纯 Javascript 做同样的事情。

虽然我在正文或顶部元素（div）上附加了change事件，但是当正文或顶部元素中输入元素的值change时，不会触发change事件...

我怎样才能做到这一点？

Answer 1

您可以只侦听一个元素（在本例中为elSelector ）上的事件，然后仅在实际目标适合该元素中的selector时才执行该事件。

function on(elSelector, eventName, selector, fn) {
    var element = document.querySelector(elSelector);

    element.addEventListener(eventName, function(event) {
        var possibleTargets = element.querySelectorAll(selector);
        var target = event.target;

        for (var i = 0, l = possibleTargets.length; i < l; i++) {
            var el = target;
            var p = possibleTargets[i];

            while(el && el !== element) {
                if (el === p) {
                    return fn.call(p, event);
                }

                el = el.parentNode;
            }
        }
    });
}

在下面的示例中，您可以看到它也适用于动态元素！

 on("#inputs", "change", ".event", (target, evt) => console.log(target.target)); function on(elSelector, eventName, selector, fn) { var element = document.querySelector(elSelector); element.addEventListener(eventName, function(event) { var possibleTargets = element.querySelectorAll(selector); var target = event.target; for (var i = 0, l = possibleTargets.length; i < l; i++) { var el = target; var p = possibleTargets[i]; while (el && el !== element) { if (el === p) { return fn.call(p, event); } el = el.parentNode; } } }); } /** random code for the button to add more inputs **/ let i = 7; document.querySelector("#b").addEventListener("click", () => { document.querySelector("#inputs").innerHTML += i + ` <input type="text" class="event"> <br>`; i++; });

 <div id="inputs"> 1 <input type="text" class="event"> <br> 2 <input type="text" class=""> <br> 3 <input type="text" class="event"> <br> 4 <input type="text" class=""> <br> 5 <input type="text" class="event"> <br> 6 <input type="text" class=""> <br> </div> <br><br> <button id="b">Add another input</button>

Answer 2

让我们定义您的事件function ：

function(event) doSomething{
    //Your code
}

让我们在你的body获取所有input标签：

var inputs = document.getElementsByTagName('input');

现在，让我们迭代它们并附加事件：

for (var inputIndex = 0; inputIndex < inputs.length; inputIndex++) {
    inputs.addEventListener('change', doSomething);
}