javascript - Remove event listener in ES6 - Stack Overflow

admin管理员组

文章数量:1389772

I have following code:

document.getElementsByClassName('drag')[i].addEventListener('mousedown', (e) => {
    console.log('mousedown' + i);
});

It would be easy, if I would be able to name the function inside listener. But it's not possible in my case.

It would look like:

e.currentTarget.removeEventListener(e.type, nameFunction);

Is there any way to make it work?

Thank you.

I have following code:

document.getElementsByClassName('drag')[i].addEventListener('mousedown', (e) => {
    console.log('mousedown' + i);
});

It would be easy, if I would be able to name the function inside listener. But it's not possible in my case.

It would look like:

e.currentTarget.removeEventListener(e.type, nameFunction);

Is there any way to make it work?

Thank you.

• javascript
• ecmascript-6

Share Improve this question Follow asked Feb 6, 2017 at 15:36 radek2sradek2s 6111 silver badge66 bronze badges 4

• 2 There is absolutely no way in which you could store a reference to that function separately…?! let cb = (e) => { ... }; ...addEventListener(..., cb); removeEventListener(..., cb);? – deceze ♦ Commented Feb 6, 2017 at 15:38
• 2 Why can't you name the function? – itamar Commented Feb 6, 2017 at 15:40
• 1 @deceze Looking forward for full reply. – radek2s Commented Feb 6, 2017 at 15:41
• @itamar because it's an arrow function. But saving it's reference into a variable is easy enough, as deceze has shown above. – nem035 Commented Feb 6, 2017 at 15:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Yes you can write like this.

document.getElementsByClassName('drag')[i].addEventListener('mousedown', mouseDownFun);
function mouseDownFun(e){
  console.log('mousedown' + i);
}
e.currentTarget.removeEventListener(e.type, mouseDownFun);

So whenever mouse down event will be triggered it will listen in mouseDownFun.

There are two ways

1. When you define a function, then add and remove the listener when you want:

   // Define a function
   const handler = () => {
       console.log('Click event...');
   }
   
   // Select the element and add event listener
   const img = document.querySelector('img');
       img.addEventListener('click', handler, false);
   
   // ...
   
   // Remove the event listener
   img.removeEventListener('click', handler, false);
   

2. When you add an event listener and remove it on event:

   // Select the element and add event listener
   const img = document.querySelector('img');
      img.addEventListener('click', function handler(event) {
         console.log('Click event...');
   
         // On event, remove the event listener
         event.currentTarget.removeEventListener(event.type, handler);
      });
   

It would be easy, if I would be able to name the function inside listener. But it's not possible in my case.

Don't use an arrow function if it doesn't allow you to do what you want.

document.getElementsByClassName('drag')[i].addEventListener('mousedown', function handler(e) {
    console.log('mousedown' + i);
    e.currentTarget.removeEventListener(e.type, handler);
});

本文标签： javascriptRemove event listener in ES6Stack Overflow