Question

我不知道如何执行此操作，我想将参数传递给回调函数“ ctrlDeleteItem”：

document.querySelector（'。container'）。addEventListener（'click'，ctrlDeleteItem）;

但是，如果这样做，我将无法访问事件属性，例如：

document.querySelector('.container').addEventListener('click', ctrlDeleteItem(item));

function ctrlDeleteItem(item, event) {
  return function() {
    console.log(item);
    console.log(event);
  }
}

如何仍将事件作为参数传递？谢谢，我找不到方法。

Answer 1

接受的答案不正确，因为它将导致立即执行ctrlDeleteItem函数。可以通过在console.log("test")函数中添加ctrlDeleteItem()语句来表明这一点-您将立即收到消息。

正确的解决方法是设置一个“包装器”回调函数，该函数将照常接收事件，然后使包装器使用所需的参数调用实际的回调函数。如果需要，包装程序可以将event传递给实际的回调。

const item = 'foo';
document.querySelector('.container').addEventListener('click', function(evt){ 
  ctrlDeleteItem(evt, item);
});

function ctrlDeleteItem(evt, item) {
    console.log(evt.type, item);
    console.log(event.target.className);
}

<div class="container">container</div>

Answer 2

将event用作ctrlDeleteItem中 returned 函数的参数，以便在侦听器中将其正确用作event：

function ctrlDeleteItem(item) {
  return function(event) {
    console.log(item);
    console.log(event);
  }
}

const item = 'foo';
document.querySelector('.container').addEventListener('click', ctrlDeleteItem(item));

function ctrlDeleteItem(item) {
  return function(event) {
    console.log(item);
    console.log(event.target.className);
  }
}

<div class="container">container</div>

如何在不丢失“ event”属性的情况下将参数传递给事件侦听器的回调函数？

2 个答案: