Javascript - 向多個元素添加事件監聽器

Question

我有多個元素使用相同的事件偵聽器。 與其重復相同的 function 三次，不如將它們組合起來為三個元素中的每一個調用相同的事件？ 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

只需將事件處理程序 function 分開，並制作一個元素數組，然后最后循環它以附加事件處理程序。

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

您可以實現事件委托模式

基本上它包括將事件分配給元素的容器，然后驗證元素的名稱或類型，你丟棄那些與你無關的元素，邏輯上只有你感興趣的元素會受到影響。 要了解更多信息，請訪問此出版物

這里有一個例子

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