事件委托、事件触发与事件冒泡

事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。

假设一个元素div,它有一个下级元素p。
   <div>
    <p>元素</p>
   </div>

事件捕获:当你使用事件捕获时,父级元素先触发,子级元素后触发,即div先触发,p后触发。

事件冒泡:当你使用事件冒泡时,子级元素先触发,父级元素后触发,即p先触发,div后触发。

 一般的,事件分为三个阶段:捕获阶段、目标阶段和冒泡阶段。

(1)捕获阶段(Capture Phase)

 事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点,并在各节点上触发捕获事  件,直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径,在冒泡阶段,事件会通过这个路径回溯到文档跟节点。

(2)目标阶段(Target Phase)

当事件到达目标节点的,事件就进入了目标阶段。事件在目标节点上被触发,然后会逆向回流,直到传播至最外层的文档节点。

(3)冒泡阶段(Bubble Phase)

事件在目标元素上触发后,并不在这个元素上终止。它会随着DOM树一层层向上冒泡,回溯到根节点。
冒泡过程非常有用。它将我们从对特定元素的事件监听中释放出来,如果没有事件冒泡,我们需要监听很多不同的元素来确保捕获到想要的事件。


 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
事件委托事件冒泡结合在面试中可能会被问到。事件委托是一种常用的绑定事件的技巧,它的原理是利用事件冒泡事件冒泡是指当一个元素上的事件触发时,它会逐级向上冒泡到它的父元素,直至冒泡到文档的根节点。这种机制可以让我们利用事件委托来处理大量的DOM元素上的事件。 举个例子来说明事件委托的原理,假设我们有一个最外层的div,里面包含了多个ul元素,而每个ul元素里面又包含了多个li元素和a元素。如果我们给最外层的div添加点击事件,那么当我们点击任意一个li元素或a元素时,事件会冒泡到最外层的div上,从而触发最外层div的点击事件。这样,我们就可以利用最外层div的点击事件来处理所有li元素和a元素的点击事件,而不需要给每个li元素和a元素分别绑定点击事件。 所以,事件委托的好处是可以减少事件处理程序的数量,提高代码的性能。通过将事件绑定在父元素上,可以节省内存,减少事件监听的绑定次数,同时也可以动态地添加或删除子元素,而不需要重新绑定事件。 总结一下,事件委托是一种利用事件冒泡原理的技巧,通过将事件绑定在父元素上,可以处理大量子元素上的事件,避免给每个子元素分别绑定事件处理程序。这样可以提高代码的性能,并且方便动态添加或删除子元素。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [什么是事件冒泡事件委托?如何实现事件委托?](https://blog.csdn.net/qq_38290251/article/details/88026540)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [面试题:什么是事件委托? 怎么阻止默认动作? 怎么阻止事件冒泡?](https://blog.csdn.net/baidulixueqin/article/details/117098286)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值