Question

我有多个使用同一事件侦听器的元素。与其重复三次相同的功能，不如将它们组合在一起以对三个元素中的每一个调用相同的事件？ cardNumber，cardExpiry和cardCvc

cardNumber.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 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);
});

Answer 3

您可以实现事件委托模式

基本上，它包括将事件分配给元素的容器，然后验证所丢弃元素的名称或类型，从而丢弃与您无关的元素，并在逻辑上仅影响您感兴趣的元素。要了解更多信息，请访问此publication

这里有个例子

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 : "";
});

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

3 个答案: