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

Question

我有多个元素使用相同的事件侦听器。与其重复相同的函数三次，哇，我是否将它们组合在一起，为三个元素中的每个元素调用相同的事件？和cardNumbercardExpirycardCvc

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