Default Passive Values on the Body Element

Alex Reardon
InstructorAlex Reardon
Share this video with your friends

Social Share Links

Send Tweet
Published 3 years ago
Updated 3 years ago

In this lesson, we'll look at how some browsers treat some events added to the body as passive by default. However, HTML attribute event handlers on the body do not share these default passive values.

Lecturer: [0:00] HTML attribute event handlers added to the body are not passive by default. Here in my onwheel HTML attribute event handler, I'm trying to cancel the event with event.preventDefault(), and then I'm going to logout whether the event was canceled.

[0:16] If I come up to the browser and try and scroll the page with my mouse wheel, I'll say that I was canceling the event. This would not be possible if the EventListener was passive. Now, I'm going to remove this attribute.

[0:29] If I come back to my JavaScript file, and I add an onwheel object property event handler to the body, and I call event.preventDefault(), and logout where the event was canceled. Now, if I try and scroll the page, we'll see that it was actually passive by default, and we were unable to cancel the event.

[0:47] Now, I'm using addEventListener() to add a wheel EventListener. I'm going to try again. Cancel the event and logout whether it was canceled. Our EventListener added to the body is also being treated as passive.

[0:59] The takeaway here is that the scroll-related events, HTML attribute event handlers added to the body element, don't have the default passive behavior as if you were adding an EventListener to the body element using addEventListener() or an object property event handler.

egghead
egghead
~ 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 egghead.io

Be on-Topic

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

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