前言
对于 JS 而言,对 DOM 的操作是重中之重,可以说是这个语言的灵魂。
以下,简单讲解下事件的冒泡、委派和绑定。
DOM 事件流
-
事件捕获阶段:事件从祖先元素往子元素查找(DOM树结构)(外至内),直到捕获到事件目标 target。在这个过程中,默认情况下,事件相应的监听函数是不会被触发的。==>addEventListener(event, function, true)
-
事件目标:当到达目标元素之后,执行目标元素该事件相应的处理函数。如果没有绑定监听函数,那就不执行。
-
事件冒泡阶段:事件从事件目标 target 开始,从子元素往冒泡祖先元素冒泡(内至外),直到页面的最上一级标签。==> addEventListener(event, function, false)
冒泡
事件冒泡: 当一个元素上的事件被触发的时候(比如说鼠标点击了一个按钮),同样的事件 将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。
通俗来讲,冒泡指的是:子元素的事件被触发时,父元素的同样的事件也会被触发。取消冒泡就是取消这种机制。
委派
事件委托,通俗地来讲,就是把一个元素响应事件(click、keydown......)的函数委托到另一个元素。
举例:
与其逐个逐个的绑定相同事件,ie:click 到 <li> 元素上,我们为什么不直接绑定给它的父元素 <ul>呢?!
这样就可以做到,只需绑定一次,就能实现子元素都能用到!
好处:
事件委托是利用了冒泡机制,减少了事件绑定的次数,减少内存消耗,提高性能。
绑定
给dom绑定不同事件,从而进行操作
参考:
冒泡: 事件的传播和事件冒泡
委派: 事件委托
绑定: 事件的绑定和事件对象Event
发表评论
您尚未登录,登录后方可评论~~登陆 or 注册