脚本 - 将事件侦听器添加到多个元素

Question

我有多个元素使用相同的事件侦听器。与其重复相同的函数三次，哇，我是否将它们组合在一起，为三个元素中的每个元素调用相同的事件？和cardNumbercardExpirycardCvccardNumber.addEventListener('change', function(event) {  var displayError = document.getElementById('card-errors');  if (event.error) {    displayError.textContent = event.error.message;  } else {    displayError.textContent = '';  }});cardExpiry.addEventListener('change', function(event) {  var displayError = document.getElementById('card-errors');  if (event.error) {    displayError.textContent = event.error.message;  } else {    displayError.textContent = '';  }});cardCvc.addEventListener('change', function(event) {  var displayError = document.getElementById('card-errors');  if (event.error) {    displayError.textContent = event.error.message;  } else {    displayError.textContent = '';  }});

Answer 1

检查这个

cardCvc.addEventListener('change', foo);

function foo(event) {

  var displayError = document.getElementById('card-errors');

  if (event.error) {

    displayError.textContent = event.error.message;

  } else {

    displayError.textContent = '';

  }

}

Answer 2

您可以实现事件委派模式

基本上，它包括将事件分配给元素的容器，然后验证您丢弃的元素的名称或类型，并且从逻辑上讲，只有您感兴趣的元素才会受到影响。要了解更多信息，请访问此出版物

下面是一个示例

const container = document.querySelector("#container");

const displayError = document.getElementById("card-errors");

container.addEventListener("change", (event) => {

  const target = event.target;

  if (target.nodeName !== "INPUT") return;

  displayError.textContent = event.error ? event.error.message : "";

});

Answer 3

只需分离事件处理程序函数，并创建元素的数组，然后最终循环它以附加事件处理程序。

const eventHandler = function(event) {

  var displayError = document.getElementById('card-errors');

  if (event.error) {

    displayError.textContent = event.error.message;

  } else {

    displayError.textContent = '';

  }

}

const items = [cardNumber, cardExpiry, cardCvc];

items.forEach((item) => {

    item.addEventListener('change, eventHandler);

});