Default Passive Values on the Body Element
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.