带有 addeventlistener 的回调函数答案

【问题标题】：callback function with addeventlistener带有 addeventlistener 的回调函数
【发布时间】：2022-01-07 22:21:31
【问题描述】：

我将 addeventlistener 函数放在其他 appendingEvents 函数中，因为这里创建了一些变量。但我想让我的 appendingEvents 函数不乱。

function appendingEvents() {
  for (let i = 0; i < eventFullInfo.title.length; i++) {
    let classes = document.querySelector(eventFullInfo.class[i]);

      document.querySelector(`.delete-${eventFullInfo.class[i].substring(1)}`).addEventListener("click", function () {
      
        classes.innerHTML = "";
        eventFullInfo.class.splice(i, 1);
        eventFullInfo.title.splice(i, 1);
        eventFullInfo.date.splice(i, 1);
        eventFullInfo.type.splice(i, 1);
        eventFullInfo.desc.splice(i, 1);
        eventFullInfo.etime.splice(i, 1);
        eventFullInfo.stime.splice(i, 1);      
    });
    
  }
}

所以我试图在 appendingEvents 函数之外创建一个函数，然后使用 addeventlistener 函数调用它。

function appendingEvents() {
  for (let i = 0; i < eventFullInfo.title.length; i++) {
    let classes = document.querySelector(eventFullInfo.class[i]);
    
    document.querySelector(`.delete-${eventFullInfo.class[i].substring(1)}`).addEventListener("click", deleteEvent(classes, i);
  }
}


function deleteEvent(classes, i) {
        classes.innerHTML = "";
        eventFullInfo.class.splice(i, 1);
        eventFullInfo.title.splice(i, 1);
        eventFullInfo.date.splice(i, 1);
        eventFullInfo.type.splice(i, 1);
        eventFullInfo.desc.splice(i, 1);
        eventFullInfo.etime.splice(i, 1);
        eventFullInfo.stime.splice(i, 1);

}

这应该是什么样子？导致上面创建的函数不起作用。

【问题讨论】：

您的 deleteEvent 函数应该返回一个函数。前任。 function deleteEvent(classes, i) { return () => { /* code here */ } } 因为您正在调用 deleteEvent 函数。该函数返回undefined，因此您的事件侦听器有一个回调undefined。你想要一个函数，所以你应该返回一个。

标签： javascript function callback addeventlistener

【解决方案1】：

addEventListener 将函数作为其第二个参数。您正在做的是调用deleteEvent 函数并将函数的结果放在那里。

您可以创建一个被触发的匿名函数，并在其中调用deleteEvent。然后你可以将任何你想要的东西传递给它。

function appendingEvents() {
  for (let i = 0; i < eventFullInfo.title.length; i++) {
    let classes = document.querySelector(eventFullInfo.class[i]);

    document.querySelector(`.delete-${eventFullInfo.class[i].substring(1)}`).addEventListener("click", () => {
      deleteEvent(classes, i)
    })
  }
}


function deleteEvent(classes, i) {
  classes.innerHTML = "";
  eventFullInfo.class.splice(i, 1);
  eventFullInfo.title.splice(i, 1);
  eventFullInfo.date.splice(i, 1);
  eventFullInfo.type.splice(i, 1);
  eventFullInfo.desc.splice(i, 1);
  eventFullInfo.etime.splice(i, 1);
  eventFullInfo.stime.splice(i, 1);

}

【讨论】：

【解决方案2】：

event listener callback function 有一个参数被传递：事件对象。传递自定义数据的最简单方法是创建一个匿名函数来调用您的函数。

function appendingEvents() {
  for (let i = 0; i < eventFullInfo.title.length; i++) {
    let classes = document.querySelector(eventFullInfo.class[i]);
    
    document.querySelector(`.delete-${eventFullInfo.class[i].substring(1)}`).addEventListener("click", function(){ deleteEvent(classes, i) });
  }
}

另一种解决方案是使用.bind()。

function appendingEvents() {
  for (let i = 0; i < eventFullInfo.title.length; i++) {
    let classes = document.querySelector(eventFullInfo.class[i]);
    
    document.querySelector(`.delete-${eventFullInfo.class[i].substring(1)}`).addEventListener("click", deleteEvent.bind(null, classes, i));
  }
}

【讨论】：