码迷,mamicode.com
首页 > Web开发 > 详细

JS事件流

时间:2020-06-30 00:27:07      阅读:58      评论:0      收藏:0      [点我收藏+]

标签:重复   动态   blog   数据流   节点   document   冒泡   pre   默认事件   

流:就是流向,有方向的的意思,比如单向数据流.

事件流:就是事件的流向,当事件发生时,响应事件的顺序,是从里向外流,还是从外向里流.

其中自然响应事件的顺序也是从里向外的,事件冒泡流也是大部分浏览器采用的默认方式

JS事件流分为三个阶段   

    1,事件捕获阶段。

    2,处于目标阶段。

    3,事件冒泡阶段。

事件冒泡:由目标元素上所产生的动作为事件触发源,然后事件层层向其父代递交,直至到document节点,期间可能产生连锁的事件触发.(由下到上,有具体元素到抽象元素)

处于目标阶段:就是事件的具体触发元素

事件捕获阶段:和事件冒泡相反.由上到下,抽象元素到具体元素

事件捕获的优先级比事件冒泡优先级要高,如果一个dom既绑定了捕获又绑定了冒泡,优先执行捕获事件

给一个dom绑定一个dom事件

w3c标准:

dom.addEventListenter("事件名","事件函数",boolean),

boolean为true或者false,默认为false,true表示捕获,false表示冒泡

 

ie不做讨论

阻止事件冒泡:event.stopPropagation()

阻止默认事件:event.preventDefault()

应用:事件代理

事件代理别名事件委托:把原本需要绑定到当前子元素上面的事件绑定到了父级身上,让父级去监听事件,利用了事件冒泡原理

事件委托的优点

1.一般的一个父级都会有很多个子级元素,将子级上的每个事件函数都是一个对象,对象都是占用内存的,利用事件委托,将所有事件都绑定到了父级,减少了减少事件注册.也就减少了内存

2.可以实现当新增子元素对象时无需再次对其绑定事件,因为委托给了父级(动态绑定事件)减少重复性工作.

JS事件流

标签:重复   动态   blog   数据流   节点   document   冒泡   pre   默认事件   

原文地址:https://www.cnblogs.com/wyq20190622/p/13211065.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!