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

• 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

3 Answers 3

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