添加和删​​除事件监听器-JavaScript

Question

I am trying to add addEventListener when I click on a div. I already found many questions and answers but I didn't achieve to make it works. Actually, I would like to pass some parameters to my eventListener.

At the beginning I tried this:

document.getElementsByClassName('my-div')[0].addEventListener('click', customFunction(event, args1, args2));

But it was not working. Indeed, on a click it was not going into customFunction .

Therefore, I tried with bind :

document.getElementsByClassName('my-div')[0].addEventListener('click', customFunction.bind(null, event, args1, args2));

This time, on a click it was passing into customFunction .

However, the param event is type Event and not MouseEvent. In the event object I don't have access to the currentTarget or things that I found usually in an event with addEventListener.

This is may due because here event is Event type whereas usually it is MouseEvent type.

I though to use anonymous function like this:

element.addEventListener("click", function() {
  // do something
});

But I need to remove the eventListener and with anynomous function it is not cleaned to do so. It's better to store the object function in order to remove the addEventListener after that.

What should I do ?

Answer 1

Try by putting the customFunction inside the callback function like this

 document.getElementsByClassName('my-div')[0].addEventListener('click', function(event) { customFunction(event, args1, args2) }); 

For removing event use removeEventListener

Answer 2

You can JQuery to bind event

 $( "#target" ).click(function() { alert( "Handler for .click() called." ); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="target"> Click here </div> <div id="other"> Trigger the handler </div> 

REF : JQuery Click Event

Replace alert with your function

Answer 3

    const clickEventListener = ['click', function (event) { 
      customFunction(event, args1, args2) 
    }];
    element.addEventListener(...clickEventListener);
    element.removeEventListener(...clickEventListener);

This fix my problem.

medium link