205

を使用して追加された特定のタイプのイベント リスナーをすべて削除したいと考えていaddEventListener()ます。私が見ているすべてのリソースは、これを行う必要があると言っています:

elem.addEventListener('mousedown',specific_function);
elem.removeEventListener('mousedown',specific_function);

しかし、次のように、現在が何であるかを知らずにクリアできるようにしたい:

elem.addEventListener('mousedown',specific_function);
elem.removeEventListener('mousedown');
4

12 に答える 12

4

したがって、この関数は、要素で指定されたリスナー タイプのほとんどを取り除きます。

function removeListenersFromElement(element, listenerType){
  const listeners = getEventListeners(element)[listenerType];
  let l = listeners.length;
  for(let i = l-1; i >=0; i--){
    removeEventListener(listenerType, listeners[i].listener);
  }
 }

いくつかのまれな例外があり、何らかの理由で削除できない場合があります。

于 2020-04-16T19:08:15.850 に答える
3

元の関数を参照せずにイベント リスナーを削除する最新の方法は、AbortControllerを使用することです。自分で追加したリスナーのみを中止できることに注意してください。

const buttonOne = document.querySelector('#button-one');
const buttonTwo = document.querySelector('#button-two');
const abortController = new AbortController();

// Add multiple click event listeners to button one
buttonOne.addEventListener(
  'click',
  () => alert('First'),
  { signal: abortController.signal }
);

buttonOne.addEventListener(
  'click',
  () => alert('Second'),
  { signal: abortController.signal }
);

// Add listener to remove first button's listeners
buttonTwo.addEventListener(
  'click',
  () => abortController.abort()
);
<p>The first button will fire two alert dialogs when clicked. Click the second button to remove those listeners from the first button.</p>

<button type="button" id="button-one">Click for alerts</button>
<button type="button" id="button-two">Remove listeners</button>

于 2021-09-17T14:25:27.007 に答える