如何从主体中委托输入元素上的“更改”事件？

Question

我已经知道jQuery的事件委托。然而，如果没有jQuery，我如何使用纯Javascript做同样的事情呢。

虽然我在body或top元素（div）上附加了Change事件，但当body或top元素中的输入元素的值更改时，不会触发Change事件...

我该怎么做呢？

Answer 1

让我们定义您的事件函数：

function(event) doSomething{
    //Your code
}

让我们在您的正文中获取所有输入标记：

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

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

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

Answer 2

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

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>