Can event handlers conflict with each other when you use addEventListeners to add additional event handlers?

According to this lesson, you can use the .addEventListener() method to allow multiple event handlers to be registered to a single event without changing its other event handlers.

Can the subsequent event handlers conflict with the one previously registered?

How does this work - that it can allow for multiple subsequent event handlers to be registered to a single event without changing the previously registered event?


If multiple handlers affect the same thing in a global context, then I suppose they could do… but I think what you mean is does one event handler overwrite/interfere with another, in which case it’s no.

All you’re doing with .addEventListener() is adding an extra thing that you want to happen when a specific event occurs.

As an analogy, consider a real-world event: Saturday.

When Saturday rolls around, we could do the following:

  • Spend an extra hour in bed,
  • Do chores,
  • Complete another lesson on Codecademy.

We can add another item to that list without affecting the others, if for example one Saturday we decide to go for a run.

.addEventListener() does the same thing, it adds another thing we want to happen to the existing list of things that happen in response to a given event.

Does that help at all?

Yes, I think it did.

I figured it’s like having to click the mouse button for an action to happen and being able to press the keyboard for the same action to happen as well.|
Is this example correct?

Not quite, because for JavaScript a “click” and a “keypress” are two separate events.

Think of it more like a high-end gaming mouse, with a load of programmable buttons. You can create a “macro”, which is a group or series of actions that happen after you click the button; stacking the event handlers is much the same.