js事件冒泡与事件捕获的示例分析
这篇文章给大家分享的是有关js事件冒泡与事件捕获的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
成都创新互联专注于网站建设，为客户提供成都网站建设、成都网站设计、网页设计开发服务，多年建网站服务经验，各类网站都可以开发，品牌网站设计，公司官网，公司展示网站，网站设计，建网站费用，建网站多少钱，价格优惠，收费合理。
（一）事件绑定
1.普通事件绑定
给html添加一个以on开头的特定的属性（如onclick，onfocus）;
方式二
方式三
2.符合W3C标准的事件绑定（addEventListener和removeEventListener）
target.addEventListener(type, listener[, useCapture]);
type:必须，表示监听事件类型的字符串；
listener:必须，当所监听的事件类型触发时，会接收到一个事件通知对象；listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数；
useCapture:可选，Boolean,默认为false，表示事件传播方式为事件冒泡；true,表示事件传播方式为事件捕获；
（事件捕获与事件冒泡下面有讲到）
这两个函数Firefox和Chrome都支持，IE9及以后也支持这两个函数；IE使用attachEvent/detachEvent来进行事件绑定和取消；
W3C标准一
W3C标准二
3.IE浏览器使用attachEvent/detachEvent进行事件绑定与取消
IE
注：同一个事件处理函数只能绑定一次；不同的函数对象可以重复绑定不会覆盖；匿名函数和匿名函数即使代码完全一样，也是互相不相同的；
（二）事件捕获与事件冒泡
事件捕获：就是从最外层到目标对象的顺序触发（如上面的代码，如果点击C，它的触发顺序为A→B→C）
事件冒泡：就是从目标对象到外层的顺序触发（如果点击C,它的触发顺序为C→B→A）
DOM事件流：就是支持两种事件模型，捕获型事件和冒泡型事件，捕获型事件先发生；两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。
图片来自网络：
//当点击C时（蓝色），输出At Bt Ct Cf Bf Af感谢各位的阅读！关于“js事件冒泡与事件捕获的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
