Remove an Event Listener

Removing An Event Listener

We say that we can use an event target's.addEventListener()method to start listening for specific events and respond to them. Let's say you only want to listen for just the first click event, respond to it, and ignore all other click events. The.addEventListener()event will listen for and respond to_all_click events.

(The newest version of the.addEventListener()specification_does_allow for an object to be passed as a third parameter. This object can be used to configure how the.addEventListener()method behaves. Of note, there is an option to listen for only a single event. However, this configuration object is not widely supported just yet).

To remove an event listener, we use the.removeEventListener()method. It sounds straightforward enough, right? However, before we look at.removeEventListener(), we need to take a brief review of object equality. It seems like an odd jump, but it'll make sense in just a moment.

Are Objects Equal in JavaScript

Equality is a common task in most programming languages, but in JavaScript, it can be a little bit tricky because JavaScript does this thing called type coercion where it will try to convert the items being compared into the same type. (e.g. string, number,). JavaScript has the double equality (==) operator thatwill allow type coercion. It also has the triple equality (===) symbol that will prevent type coercion when comparing.

Hopefully, this is all review. But let's talk about_just_object equality, which includes objects, arrays, and functions. Try giving this quiz a shot:

QUESTION 1 OF 4

Will the following equality test result intrueorfalse?

{ name: 'Richard' } === { name: 'Richard' }

true
false

SUBMIT: B ((Potentially) Counterintuitively, these two objects are _not _equal.)

QUESTION 2 OF 4

Given this code:

var a = {
    myFunction: function quiz() { console.log('hi'); }
};
var b = {
    myFunction: function quiz() { console.log('hi'); }
};

Does the following code evaluate totrueorfalse?

a.myFunction === b.myFunction

true
false

SUBMIT: B (This is the same thing as { name: 'Richard' } === { name: 'Richard' ; both of the myFunctio functions are different functions. They look the same, but they are distinct entities.)

QUESTION 3 OF 4

Given this code:

function quiz() { ... }

var a = {
    myFunction: quiz
};
var b = {
    myFunction: quiz
}

Does the following code evaluate totrueorfalse?

a.myFunction === b.myFunction

true
false

SUBMIT: A (Both of the myFunction functions are referring to the same, exact quiz function.)

Ok, so why do we care about any of this object/function equality? The reason is that the.removeEventListener()method requires you to pass_the same exact listener function_to it as the one you passed to.addEventListener().

Let's see some pseudo-code for the.removeEventListener():

<event-target>.removeEventListener(<event-to-listen-for>, <function-to-remove>);

So an event listener needs three things:

an event target - this is called the target
the type of event to listen for - this is called the type
the function to remove - this is called the listener

Remember, the_listener_function must be the_exact_same function as the one used in the.addEventListener()call...not just an identical looking function. Let's look at a couple of examples.

This code will successfully add and then remove an event listener:

function myEventListeningFunction() {
    console.log('howdy');
}

// adds a listener for clicks, to run the `myEventListeningFunction` function
document.addEventListener('click', myEventListeningFunction);

// immediately removes the click listener that should run the `myEventListeningFunction` function
document.removeEventListener('click', myEventListeningFunction);

Now, why does this work? It works because both.addEventListener()and.removeEventListener:

have the same target
have the same type
and pass the exact same listener

Now let's look at an example that would_not_work (it does_not_remove the event listener):

// adds a listener for clicks, to run the `myEventListeningFunction` function
document.addEventListener('click', function myEventListeningFunction() {
    console.log('howdy');
});

// immediately removes the click listener that should run the `myEventListeningFunction` function
document.removeEventListener('click', function myEventListeningFunction() {
    console.log('howdy');
});

This code does_not_successfully remove the event listener. Again, why does this_not_work?

both .addEventListener() and .removeEventListener have the same target
both .addEventListener() and .removeEventListener have the same type
.addEventListener() and .removeEventListener have their own distinct listener functions...they do not refer to the exact same function (this is the reason the event listener removal fails!)

Why don't you try your hand at this!

QUESTION 4 OF 4

Assuming thatmyFormis a<form>element, will the<form>element have asubmitevent listener after running the following code, or not?

myForm.addEventListener('submit', function respondToSubmit(){...});
myForm.removeEventListener('submit', function respondToSubmit(){...});

the element will have no event listeners
the element will still have an event listener

SUBMIT: B (Since both .addEventListener() and .removeEventListener provide their own respondToSubmit() function and do not refer to the same function, the event listener removal fails, and the <form> will _still _have an event listener attached to it.)

What's Next?

Now that we've learned about adding and removing event listeners, it's time to learn about the_phases_of an event!

Recap

In this section, you learned about how to remove event listeners. You took a dive into object equality and how that plays a huge part in removing an event. Lastly, we also looked at how you can find out what event listener a DOM element has by using the DevTools.

2 Remove an Event Listener