以正确的方式删除事件侦听器

Question

如何正确删除事件侦听器...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.}我做了一堆挖掘，那里的顶部答案建议将侦听器添加到对象中以便于删除，但是......我不知道如何做到这一点

Answer 1

虽然您可以保存对调用时使用的函数的引用，以便可以将其删除，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

};

Answer 2

...最终这样做：

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 感谢您的帮助！:)