首頁猿問以正確的方式刪除事件偵聽器

以正確的方式刪除事件偵聽器

JavaScript

守候你守候我 2022-08-18 16:20:43

如何正確刪除事件偵聽器...function createMaze() { var x; for (x = 0; x < 4; x++) { var mazeBlock = document.createElement('div'); document.body.appendChild(mazeBlock); mazeBlock.setAttribute('class', 'blockStyle'); mazeBlock.setAttribute('id', 'mazeBlock'+x); mazeBlock.addEventListener( 'click', function(){ eventCall(this) } ); }}function eventCall(t) { alert( t.id ); t.removeEventListener(); //...know that I'm missing something here.// Also in my code, this remove will not happen here but be initiated somewhere else in the script.}我做了一堆挖掘，那里的頂部答案建議將偵聽器添加到對象中以便于刪除，但是......我不知道如何做到這一點

查看完整描述

2 回答

吃雞游戲

TA貢獻1829條經驗獲得超7個贊

雖然您可以保存對調用時使用的函數的引用，以便可以將其刪除，addEventListener

for (let x = 0; x < 4; x++) {

const mazeBlock = document.createElement('div');

document.body.appendChild(mazeBlock);

mazeBlock.className = 'blockStyle';

mazeBlock.id = 'mazeBlock' + x;

mazeBlock.addEventListener('click', function handler() {

mazeBlock.removeEventListener('click', handler);

eventCall(mazeBlock);

});

}

（上面，以作為第一個參數調用）eventCall<div>

通過將第三個參數傳遞給以下命令來確保函數只能調用一次會更容易：{ once: true }addEventListener

mazeBlock.addEventListener( 'click', eventCall, { once: true });

（上面，以事件作為第一個參數調用 - 要獲得，訪問參數的）eventCall<div>.target

如果需要刪除所有此類元素的偵聽器，則可以考慮使用不同的方法 - 與其附加大量偵聽器然后全部刪除，不如使用事件委派。這樣，您所要做的就是刪除單個委派偵聽器：

document.body.addEventListener('click', function handler(event) {

if (!event.target.matches('.blockStyle')) return;

// A block was clicked on, remove the listener:

document.body.removeEventListener('click', handler);

// Do stuff with the clicked element:

eventCall(event.target);

});

如果您被奇怪的學校規則強迫為每個元素添加偵聽器，請在循環外部創建偵聽器函數，然后迭代所有元素并在需要時從每個元素中刪除偵聽器：

const handler = (event) => {

document.querySelectorAll('.blockStyle').forEach((div) => {

div.removeEventListener('click', handler);

});

// do stuff with event and event.target

};

反對回復 2022-08-18

30秒到達戰場

TA貢獻1828條經驗獲得超6個贊

...最終這樣做：

function createMaze() {

var x;

for (x = 0; x < 4; x++) {

const mazeBlock = document.createElement('div');

document.body.appendChild(mazeBlock);

mazeBlock.className = 'blockStyle';

mazeBlock.id = 'mazeBlock' + x;

mazeBlock.addEventListener( 'click', eventCall );

}

function eventCall() {

alert( this.id );

}

//...this is called from another piece of the script on a separate occasion

function removeListeners() {

var blocks = document.getElementsByClassName('blockStyle');

for (var i = 0; i < blocks.length; i++) {

var block = blocks[i];

block.removeEventListener( 'click', eventCall );

}

@CertainPerformance 感謝您的幫助！:)

反對回復 2022-08-18

2 回答
0 關注
251 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

以正確的方式刪除事件偵聽器

以正確的方式刪除事件偵聽器

2 回答

添加回答