您的位置:首页 > 其它

事件捕获和事件冒泡、事件委托

2018-01-23 18:11 465 查看
支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法,基中第3个参数useCapture是一个Boolean值,用来设置事件是在事件捕获时执行,还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法,此方法没有相关设置,不过IE的事件模型默认是在事件冒泡时执行的,也就是在useCapture等于false的时候执行,所以把在处理事件时把useCapture设置为false是比较安全,也实现兼容浏览器的效果

 W3c明智的在这场争斗中选择了一个择中的方案。任何发生在w3c事件模型中的事件,首是进入捕获阶段,直到达到目标元素,再进入冒泡阶段

为一个web开发者,你可以选择是在捕获阶段还是冒泡阶段绑定事件处理函数,这是通过addEventListener()方法实现的,如果这个函数的最后一个参数是true,则在捕获阶段绑定函数,反之false,在冒泡阶段绑定函数。

w3c默认先捕获后冒泡

addEventListener(event,fn,false) 捕获=>子元素和父元素同时绑定相同时间时,点击子元素,事件触发机制会先触发父元素的事件,接着向里面捕获子元素,触发子元素的事件

addEventListener(event,fn,true)
冒泡 =>子元素和父元素同时绑定相同时间时,点击子元素,事件触发机制会先触发子元素的事件,接着向上冒泡,触发父元素的事件

事件委托是利用事件冒泡机制,将子元素的事件委托给父元素执行,减少DOM操作,有利于优化性能。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: