一篇文章,它使您对JS的事件冒泡和事件捕获有了透彻的了解。

在学校,当听老师解释事件和事件捕获机制听天书,只记得即是使用其他浏览器是事件,事件捕捉。我把它作为一个IE浏览器的兼容性问题,所以我看不到它的浏览器IE8进行以下(基本退出市场)。工作至今,虽然多次遇到这种问题,但尚未有深入的研究,总是半理解,满足所有TM通过猜测(选择不能选择B)。今天我们做的演示,是深入理解问题。

首先得出结论:他们所描述的事件的条款触发时序问题。事件捕获是指从文件来触发事件,即节点,自上而下的触发事件。相反,这是一种自下而上的触发事件冒泡。结合事件的方法的第三个参数是控制事件是否触发顺序捕获事件。真的,事件捕获;假,事件冒泡。默认值为假,即事件冒泡。jQuery的e.stoppropagation防止泡沫,这意味着我的父亲和父亲的事件并没有引发我为止。

这是HTML结构



U3000 U3000



现在我们把它们绑定到事件


document.getelementbyid(母),AddEventListener(单击
警报(父事件被触发,+此ID);
})
document.getelementbyid(孩子)AddEventListener(单击。
警报()触发子事件,+
})


结果uff1a

子事件被触发,孩子

父事件被触发,父进程。

结论:首先是孩子,其次是父母,事件的触发顺序是由内到外,即事件泡沫。

现在,第三个参数的变化值是真的。


document.getelementbyid(母),AddEventListener(单击
警报(父的事件触发,+ e.target。ID);
},真的)
document.getelementbyid(孩子)AddEventListener(单击。
警报(孩子的事件触发,+ e.target。ID)
},真的)


结果uff1a

父事件被触发,父进程。

子事件被触发,孩子

结论:首先是父母,然后是孩子,事件触发的顺序从外部到外部,即事件捕获。

似乎没有鸡蛋,一个利用事件冒泡的案例,但我经常使用它。


U3000 U3000
第一条
2
Item3
第四
5




要求是这样的:鼠标在李上放置相应的背景灰。

利用事件气泡实现:


$(UL),(鼠标悬停
(e.target美元)。Css(背景颜色
})


也许有人会说,我们可以把所有的李直接绑到这个事件上,而且一点也不麻烦,只要…


$(礼),(鼠标悬停
$(这个)Css(背景色
})


是的,没关系。从代码的简单性上看,这两个代码是一样的。但是,前者不需要遍历所有的李节点,所以性能肯定更好。

此外,如果我们做绑定事件,页面会动态加载一些元素…

$(条款7)。AppendTo(UL);

此时,第二方案,由于绑定事件,条款7是不存在的,所以为了效果,我们还需要将它绑定到另一个事件,利用气泡方案事件与UL…

高的判断!

以上是您为您安排的JS事件的详细介绍,希望您能继续支持。