帶有addeventlistener的回呼函式-有解無憂

我將 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);

}

這應該是什么樣子？因為上面創建的功能不起作用。

uj5u.com熱心網友回復：

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

}

uj5u.com熱心網友回復：

該事件偵聽器回呼函式具有傳遞一個引數：事件物件。傳遞自定義資料的最簡單方法是創建一個呼叫您的函式的匿名函式。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/405309.html

標籤：

上一篇：在React中顯示物件陣列中的影像和文本

下一篇：<style>禁用未應用