先上结论:他们是描述事件触发时序问题的术语。事件捕获指的是从文档到触发事件的那个节点,即自上而下的去触发事件。相反的,事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获.true,事件捕获;假,事件冒泡。默认假,即事件冒泡.Jquery的e。stopPropagation
这是HTML结构
123 <代码类=癏TML平原”> & lt; <代码类=" HTML关键字"> div ,<代码类=癏TML平原”> id=案浮痹?/代码> <代码类=癏TML平原”> & lt; <代码类=" HTML关键字"> div ,<代码类=癏TML平原”> id=昂⒆印眂lass=白印痹? lt;/ <代码类=" HTML关键字"> div <代码类=" HTML平原">在 <代码类=癏TML平原”> & lt;/ <代码类=" HTML关键字"> div <代码类=" HTML平原">在现在我们给它们绑定上事件
<>之前,,,,,,,,,,,,. getelementbyid(“父”).addEventListener(“点击”,函数(e) { ,,,,,,,,,,,,,,,警报(“父事件被触发,“+ this.id); ,,,,,,,,,,,}) ,,,,,,,,,,,. getelementbyid(“子”).addEventListener(“点击”,函数(e) { ,,,,,,,,,,,,,,,警报(“孩子事件被触发,“+ this.id) ,,,,,,,,,,,})结果:
子事件被触发,孩子 父母事件被触发、家长
结论:先孩子,然后父母。事件的触发顺序自内向外,这就是事件冒泡。
现在改变第三个参数的值为真
. getelementbyid(“父”).addEventListener(“点击”,函数(e) {
,,,,,,,,,,,,,,,警报(“父事件被触发,“+ e.target.id);
,,,,,,,,,,,},真的)
,,,,,,,,,,,. getelementbyid(“子”).addEventListener(“点击”,函数(e) {
,,,,,,,,,,,,,,,警报(“孩子事件被触发,“+ e.target.id)
,,,,,,,,,,,},true) 结果:
<>以前父母事件被触发,父母 孩子事件被触发、儿童结论:先父母,然后孩子。事件触发顺序变更为自外向内,这就是事件捕获。
貌似没什么卵用,上一个利用事件冒泡的案例,反正我是经常会用的到。
& lt; ul> ,,,,,,,,,,,& lt; li> item1 ,,,,,,,,,,,& lt; li> item2 ,,,,,,,,,,,& lt; li> item3 ,,,,,,,,,,,& lt; li> item4 ,,,,,,,,,,,& lt; li> item5 ,,,,,,,,,,,& lt; li> item6 ,,,,,,,& lt;/ul>
需求是这样的:鼠标放到李上对应的李背景变灰。
利用事件冒泡实现:
(“ul”)。在美元(鼠标悬停,函数(e) {
,,,,,,,,,,,,,,,(e。target)美元。css(“背景颜色”,“# ddd”) .siblings () . css(“背景颜色”,“白色”);
,,,,,,,,,,,}) 也许有人会说,我们直接给所有李都绑上事件也可以啊,一点也不麻烦,只要……
(“李”)。在美元(鼠标悬停,函数(){
,,,,,,,,,,,,,,,(这)美元。css(“背景颜色”,“# ddd”) .siblings () . css(“背景颜色”,“白色”);
,,,,,,,,,,,}) 是,这样也行。而且从代码简洁程度上,两者是相若仿佛的。但是,前者少了一个遍历所有李节点的操作,所以在性能上肯定是更优的。
还有就是,如果我们在绑定事件完成后,页面又动态的加载了一些元素……
$ (“& lt; li> item7”) .appendTo (“ul”);
这时候,第二种方案,由于绑定事件的时候item7还不存在,所以为了效果,我们还要给它再绑定一次事件。而利用冒泡方案由于是给ul绑的事件……
高下立判!
转载自:http://www.cnblogs.com/qq9694526/p/5653728.html
