关于滚动事件无法冒泡问题的探索

301 阅读1分钟

监听页面滚动的两种情况:

  1. 整个窗口(window)在进行滚动
  2. 某个元素在进行滚动

首先把其中的概念理清:

  • window表示当前的浏览器窗口,其中包含了文档对象(document DOM)
  • 页面中的其它元素都是被包含在document中的
  • document.defaultView指向的是window

疑问:如果只是某个元素在滚动,那么通过监听window的scroll事件能否监听到呢?

答:不能

虽然在MDN上所查询到的scroll事件是会bubble(冒泡的),但是实际使用时发现并不能通过事件冒泡+事件委托的方式来监听到某个元素的滚动事件

查询了stackoverflow上的回答:stackoverflow.com/questions/1…

大致的意思是:

srcoll并不会在元素上进行冒泡。它只会在document.defaultView(也就是window)上的文档对象进行冒泡。

这种行为是出于性能的考虑(滚动事件会被高频触发)

滚动事件虽然不能通过冒泡进行监听,但可以被捕获。