Choose an Event Listener Mechanism

Alex Reardon
InstructorAlex Reardon
Share this video with your friends

Social Share Links

Send Tweet
Published 3 years ago
Updated 3 years ago

Sometimes you need to use addEventListener to listener to particular events as there are no corresponding HTML attribute or object property event handlers for the event.

Instructor: [0:00] It is possible to listen for events using HTML attribute event handlers, element property event handlers, and addEventListener. I almost always use addEventListener to listen to events, as it allows multiple event listeners to be added to a single event target, as well as providing a lot more control over the binding.

[0:21] You're often free to choose what mechanism you like to listen to events. However, some events do not have corresponding HTML attributes or element properties. You will need to use addEventListener in that case. For example, DOMContentLoaded has no corresponding HTML attribute or element property event handler, so you'll need to use addEventListener to listen for that event.

[0:48] A good place to see what event listener mechanisms you have available to you is the MDN event reference. Firstly, I'm going to look up the click event. I can come in here, and I can see it. Click has a corresponding event handler property. I can go into here and find out a bit more about that.

[1:06] If I go back to the root page, I'm now going to look up the DOMContentLoaded event. If I come in here, I can say, "Oh OK, DOMContentLoaded doesn't have an event handler property, so I'm going to need to use addEventListener."

~ an hour ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today