欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS---DOM---事件冒泡和阻止事件冒泡,总结事件

程序员文章站 2022-07-09 20:16:26
事件冒泡: 多个元素嵌套, 有层次关系 ,这些元素都注册了相同的事件, 如果里面的元素的事件触发了, 外面的元素的该事件自动的触发了 事件有三个阶段: 1.事件捕获阶段 :从外向内 2.事件目标阶段 :最开始选择的那个 3.事件冒泡阶段 : 从里向外 为元素绑定事件 addEventListener ......
事件冒泡: 多个元素嵌套, 有层次关系 ,这些元素都注册了相同的事件, 如果里面的元素的事件触发了, 外面的元素的该事件自动的触发了
 
 

事件有三个阶段:

1.事件捕获阶段  :从外向内
2.事件目标阶段  :最开始选择的那个
3.事件冒泡阶段  : 从里向外
 

为元素绑定事件

addeventlistener("没有on的事件类型", 事件处理函数, 控制事件阶段的)
 
事件触发的过程中, 可能会出现事件冒泡的效果, 为了阻止事件冒泡--->
 
window.event.cancelbubble=true;谷歌,ie8支持,火狐不支持
window.event就是一个对象,是ie中的标准
e.stoppropagation();阻止事件冒泡---->谷歌和火狐支持
window.event和e都是事件参数对象,一个是ie的标准,一个是火狐的标准
事件参数e在ie8的浏览器中是不存在,此时用window.event来代替
addeventlistener中第三个参数是控制事件阶段的
 
事件的阶段有三个:
通过e.eventphase这个属性可以知道当前的事件是什么阶段你的
如果这个属性的值是:
1---->捕获阶段
2---->目标阶段
3---->冒泡
 
一般默认都是冒泡阶段,很少用捕获阶段-----> 冒泡阶段:从里向外
冒泡阶段:从里向外
捕获阶段:从外向内