How to overwrite event handler for 'click' event in javaScript?

Question

I want to overwrite event handler for click event. This is the event handler I have attached initially.

document.querySelector("[data-id='start-btn']")
            .addEventListener("click", function (evt) {
                //some code
            });

Again after some condition, I want to over write this handler and attach new for 'click' event.

 //removing
 document.querySelector("[data-id='start-btn']")
    .removeEventListener("click", function (evt) {
            //some code
        }, false);

  //attaching new
  document.querySelector("[data-id='start-btn']")
    .addEventListener("click", function (evt) {
            //code
        });

But still it is executing the previous event handler.I have used removeEventListener(but I guess, its not working).

Guide me where I am going wrong.

Answer 1

The only way to remove a handler added with addEventListener is to use removeEventListener with exactly the same arguments. That means you'll need a reference to the original function:

var handler = function (evt) {
    //some code
};
document.querySelector("[data-id='start-btn']").addEventListener("click", handler);

then to remove

document.querySelector("[data-id='start-btn']").removeEventListener("click", handler);

Answer 2

removeEventListener makes sense really only when using function references rather than passing an entire function body to both it and addEventListener, which would potentially mean mass duplication of code (and, as you've found, doesn't work anyway.)

So, prepare a reference to your function:

function my_func() { /* code */ }

And pass it as the handler argument to add/removeEventListener

document.querySelector('query').addEventListener('click', my_func);
document.querySelector('query').removeEventListener('click', my_func);

There is an easier way that utilises an older coding standard. If you specifically want only one event handler for a given type and element, you can use the DOM-zero onclick.

document.querySelector('query').onClick = my_func;
document.querySelector('query').onClick = my_func2; /* my_func() will no longer fire */