为什么要有事件捕获和事件冒泡?

学习js的事件对象,就会提到事件循环机制和事件处理模型,要知其然更要知其所以然,学起来才能事半功倍。

大概讲解一下,损失一点精确性,力求简单明了。

浏览器的每个座标点对应一个dom对象(当然这是比喻,实际上是一个dom对象可能占用一大片地方,它是多个座标点集),就拿hover事件来说,鼠标每次移动一个像素,硬件驱动程序就向操作系统报告一次,这里忽略操作系统这个中介,把它看成直接报给浏览器,毕竟对于前端开发来说,浏览器就可以认为是我们的操作系统。然后浏览器根据这个鼠标座标位置,找到对应的dom对象,并运行此对象里面hover属性绑定的函数。这是最机械最简化理解的事件驱动过程(事实上浏览器层面肯定对此作了优化)。而浏览器找到dom对象并运行其上的绑定函数时,还会创一个event对象扔进事件函数的第一个参数里供我们使用。

那么问题来了,因为同一个像素点会被不同dom包含,而这些dom还往往是父子嵌套关系,那么点击这个点,是在点击父(运行父级dom上的绑定函数)?还是子(运行子级dom上的绑定函数)?还是父子都被点击(父和子dom上的绑定函数都运行,如果这样那应该先运行子上的函数还是先运行父上的)?

用不同的方式解决此困惑,就形成了由外而内的捕获模式和由内而外的冒泡模式。

所以如果在冒泡模式下,想精细化的约束某个事件到子,就可以调用阻止冒泡函数,那么父就感受不到此事件了。

但我似乎没有见到有阻止向下捕获函数,从而将事件约束到父。

如果是没有父子关系的两个dom都占用一个像素点,那就更好处理,分别独立运行这两个dom的绑定函数即可。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章