如何阻止事件冒泡和默认行为?

从零开始学前端 专栏收录该内容
198 篇文章 2 订阅

大家好,修真院技术分享,一枚正直善良的web程序员。

今天给大家分享一下,修真院官网JS-4任务中如何阻止事件冒泡和默认行为?

一、背景介绍

讲之前先说说什么是事件

Event

在触发DOM上某个事件时,会产生一个事件对象event,这个对象包含着所有事件有关的信息(导致事件的元素、事件的类型、与特定事件相关的信息)

所有浏览器都支持Event对象,但支持方式不同

IE中的事件对象:window.event

二、知识剖析
2.1冒泡机制

大家都看到过水中气泡的过程吧。气泡从水底开始往上升,由深到浅,升到最上面。在上升的过程中,气泡会经过不同深度层次的水。

相对应地:这个气泡就相当于我们这里的事件,而水则相当于我们的整个dom树;事件从dom 树的底层 层层往上传递,直至传递到dom的根节点。

2.2默认事件

浏览器的一些默认的事件。例如:点击超链接跳转,点击右键会弹出菜单,滑动滚轮控制滚动条

三、常见问题

如何阻止事件冒泡和默认事件?

如果我们现在想实现这样的功能,在div1 点击的时候,弹出 “你好,我是最外层div。”,点击div2 的时候,弹出 “你好,我是第二层div”;点击span 的时候,弹出"您好,我是span。"。

由此我们首先想到的应该是下面的javascript片段:

window.onload = function() {

document.getElementById(“box1”).addEventListener(“click”,function(event){

alert(“您好,我是最外层div。”);

});

document.getElementById(“box2”).addEventListener(“click”,function(event){

alert(“您好,我是内层div。”);

});

document.getElementById(“span”).addEventListener(“click”,function(event){

alert(“没错,我就是span。”);

});

}

预期上述代码会单击span 的时候,会出来一个弹出框 “没错,我就是span。” 是的,确实弹出了这样的对话框
然而,不仅仅会产生这个对话框,当点击确定后,会依次弹出其他对话框。

这并不是我们想要的结果,我们更多时候是希望点谁就显示谁的信息。为什么会出现上述的情况呢? 原因就在于事件的冒泡,点击span的时候,span 会把产生的事件往上冒泡,作为父节点的div2 和 祖父节点的div1也会收到此事件,于是会做出事件响应,执行响应函数。

四、解决方案
方法一:我们来考虑一个形象一点的情况:水中的一个气泡正在从底部往上冒,而你现在在水中,不想让这个气泡往上冒,怎么办呢?你首先想到的肯定就是把它扎破,扎破了自然就不会往上冒了。类似地,对某一个节点而言,如果不想它现在处理的事件继续往上冒泡的话,我们可以终止冒泡。

在相应的处理函数内,加入 event.stopPropagation() ,终止事件的广播分发,这样事件停留在本节点,不会再往外传播了。修改上述的script片段:

方法一

window.onload = function() {

document.getElementById(“box1”).addEventListener(“click”,function(event){

alert(“您好,我是最外层div。”);

event.stopPropagation();

});

document.getElementById(“box2”).addEventListener(“click”,function(event){

alert(“您好,我是内层div。”);

event.stopPropagation();

});

document.getElementById(“span”).addEventListener(“click”,function(event){

alert(“没错,我就是span。”);

event.stopPropagation();

});

}

方法二:事件包含最初触发事件的节点引用 和 当前处理事件节点的引用,那如果节点只处理自己触发的事件即可,不是自己产生的事件不处理。

event.target 引用了产生此event对象的dom 节点,而event.currrentTarget 则引用了当前处理节点,我们可以 两个target 是否相等。

比如span 点击事件,产生一个event 事件对象,event.target 指向了span元素,span处理此事件时,event.currentTarget 指向的也是span元素,这时判断两者相等,则执行相应的处理函数。而事件传递给div2 的时候,event.currentTarget变成 div2,这时候判断二者不相等,即事件不是div2 本身产生的,就不作响应处理逻辑。

方法二

window.onload = function() {

document.getElementById(“box1”).addEventListener(“click”,function(event){

if(event.target == event.currentTarget)

{

alert(“您好,我是最外层div。”);

}

});

document.getElementById(“box2”).addEventListener(“click”,function(event){

if(event.target == event.currentTarget)

{

alert(“您好,我是内层div。”);

}

});

document.getElementById(“span”).addEventListener(“click”,function(event){

if(event.target == event.currentTarget)

{

alert(“没错,我就是span。”);

}

});

}

比较:从事件传递上看:方法一在于取消事件冒泡,即当某些节点取消冒泡后,事件不会再传递;方法二在于不阻止冒泡,过滤需要处理的事件,事件处理后还会继续传递;

优缺点:

方法一缺点:为了实现点击特定的元素显示对应的信息,方法一要求每个元素的子元素也必须终止事件的冒泡传递,即跟别的元素功能上强关联,这样的方法会很脆弱。比如,如果span 元素的处理函数没有执行冒泡终止,则事件会传到div2上,这样会造成div2 的提示信息;

方法二缺点:方法二为每一个元素都增加了事件监听处理函数,事件的处理逻辑都很相似,即都有判断 if(event.target == event.currentTarget),这样存在了很大的代码冗余,现在是三个元素还好,当有10几个,上百个又该怎么办呢?还有就是为每一个元素都有处理函数,在一定程度上增加逻辑和代码的复杂度。

五、编码实战
既然事件是冒泡传递的,那可不可以让某个父节点统一处理事件,通过判断事件的发生地(即事件产生的节点),然后做出相应的处理呢?答案是可以的,下面通过给body 元素添加事件监听,然后通过判断event.targe然后对不同的target产生不同的行为。

将方法二的代码重构一下:

方法二重构

结果会是点击不同的元素,只弹出相符合的提示,不会有多余的提示。

六、拓展思考
事件冒泡有什么作用?

事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。让不同的对象同时捕获同一事件,并调用自己的专属处理程序做自己的事情

七、参考文献
参考一:博客园

参考二:脚本之家

  • 2
    点赞
  • 0
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

从零开始学前端

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值