前言

对于 JS 而言,对 DOM 的操作是重中之重,可以说是这个语言的灵魂。

以下,简单讲解下事件的冒泡、委派和绑定。

 

DOM 事件流

  • 事件捕获阶段:事件从祖先元素往子元素查找(DOM树结构)(外至内),直到捕获到事件目标 target。在这个过程中,默认情况下,事件相应的监听函数是不会被触发的。==>addEventListener(event, function, true)

  • 事件目标:当到达目标元素之后,执行目标元素该事件相应的处理函数。如果没有绑定监听函数,那就不执行。

  • 事件冒泡阶段:事件从事件目标 target 开始,从子元素往冒泡祖先元素冒泡(内至外),直到页面的最上一级标签。==> addEventListener(event, function, false)

 

冒泡

事件冒泡: 当一个元素上的事件被触发的时候(比如说鼠标点击了一个按钮),同样的事件 将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。

通俗来讲,冒泡指的是:子元素的事件被触发时,父元素的同样的事件也会被触发。取消冒泡就是取消这种机制。

 

 

委派

事件委托,通俗地来讲,就是把一个元素响应事件(click、keydown......)的函数委托到另一个元素

 

举例:

与其逐个逐个的绑定相同事件,ie:click 到 <li> 元素上,我们为什么不直接绑定给它的父元素 <ul>呢?!

这样就可以做到,只需绑定一次,就能实现子元素都能用到!

 

好处:

事件委托是利用了冒泡机制,减少了事件绑定的次数,减少内存消耗,提高性能

 

 

绑定

给dom绑定不同事件,从而进行操作

 

 

参考:

冒泡: 事件的传播和事件冒泡

委派: 事件委托

绑定: 事件的绑定和事件对象Event

延伸阅读
  1. 上一篇: JS笔记 | 7. 定时器
  2. 下一篇: JS笔记 | 5. 正则表达式 RegExp

发表评论

您尚未登录,登录后方可评论~~
登陆 or 注册

评论列表

暂无评论哦~~