189 8069 5689

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对象结束。

图片来自网络:

js事件冒泡与事件捕获的示例分析


 
  
 


//当点击C时(蓝色),输出At Bt Ct Cf Bf Af

阻止事件的传播:

• 在W3c中,使用stopPropagation()方法

• 在IE下设置cancelBubble = true;

阻止事件的默认行为:

• 在W3c中,使用preventDefault()方法;

• 在IE下设置window.event.returnValue = false;

感谢各位的阅读!关于“js事件冒泡与事件捕获的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


新闻标题:js事件冒泡与事件捕获的示例分析
网页链接:http://cdxtjz.cn/article/jcjchc.html

其他资讯