Question

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

尽管我在主体或顶部元素（div）上附加了'change'事件，但是在主体或顶部元素中的输入元素的值发生更改时，不会触发'change'事件...

我该怎么做？

Answer 1

让我们定义您的事件function：

function(event) doSomething{
    //Your code
}

让我们在您的input中获得所有body标签：

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

现在，让我们对其进行迭代并附加事件：

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

Answer 2

您可以仅在一个元素（在本例中为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>

如何从正文中委派输入元素上的“ change”事件？

2 个答案: