js事件冒泡、阻止事件冒泡以及阻止默认行为

本文深入探讨了JS事件冒泡原理,展示了如何通过stopPropagation()和cancelBubble属性阻止事件冒泡,以及preventDefault()方法阻止默认行为。通过具体代码示例,帮助读者理解并掌握这些关键概念。

大家好,我是IT修真院武汉分院web第17期的学员吴三水,一枚正直纯洁善良的web程序员。
今天给大家分享一下,修真院官网js(职业)任务四,深度思考中的知识点——js事件冒泡、阻止事件冒泡以及阻止默认行为

1.背景介绍

冒泡事件

故名思意,冒泡事件就像水底气泡浮到水面这一过程。即是事件从最底层逐个经过上面一级级事件的过程,就是冒泡事件。

默认事件

默认事件就是浏览器自己的行为,比如我们在点击a标签<a href="#">时候,浏览器跳转到指定页面。比如当我们滚动鼠标时页面会向下滚动。

2.知识剖析

事件冒泡 :当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级,一直到window 。

事件冒泡传递的仅仅只是事件,并不会传递其他东西,如果父级没有绑定事件函数的话,就算传递了事件,也不会有什么表现,但是我们要清楚,事件是确确实实传递到了)

我们看下面代码:

           //js
            var a = document.getElementById("123");
            var b = document.getElementById("321");
            a.addEventListener("click", function () {
                alert(1);
            })
            b.addEventListener("click", function () {
                alert(2);
            })
            //html
        <div id="123" style="display:inline-block;width:200px;height:200px;background: #ff0000;">我是父级元素
        <div id="321" style="display:inline-block;margin-left:200px;width:100px;height:100px;background:#000;color:#fff;">我是子级元素</div>
    </div>
    

因为如果子级元素放在父级里面会让人误会到是点击子级的同时点到了父级,所以特意将子级搬出父级
上面两个父子关系的div,然后分别加了点击事件,当我们在子div里面点击的时候,会发现弹出了一次1,接着又弹出了2,这说明点击的时候,不仅子div的事件被触发了,它的父级的点击事件也触发了,说明子div的将事件传递给了父div。这种就是冒泡事件。

3.常见问题

大多数时候,冒泡事件给我们带来的缺是困扰,比如下面这个:

    //js
            var b = document.getElementById("321");
            b.addEventListener("click", function () {
            a.style.display = "block";
            })
       	    document.onclick = function () {
            a.style.display = "none";
            }
            //html
          <div id="123" style="display:inline-block;width:200px;height:200px;background: #ff0000;">点击除了#321外的地方我会显示</div>
    	  <div id="321" style="display:inline-block;margin-left:200px;width:100px;height:100px;background:#000;color:#fff;">点击我#123会隐藏</div>

在这里插入图片描述
在这里插入图片描述
这个时候我们测试发现,怎么点击#321面板,#123面板都不会显示了,为什么呢?就是冒泡的原因,我们来分析下代码,当点击#321的时候,他会触发父亲级别的点击事件,然后一层一层的往上传,所以document的点击事件自然也被触发了,然后执行了自己身上的绑定事件,让#123面板消失。所以当你点击#321的时候首先,让粉丝面板显示,只是事件执行太快了,很快又执行了document的点击事件,让面板隐藏。 不信可以再两个事件之间加一个弹出,就可以测试。

4.解决方案
解决办法就是取消冒泡:
取消事件冒泡可以运用下面方法:

e.stopPropagation();
stopPropagation() 方法定义是:不再派发事件。所以直接调用的event 即可

window.event.cancelBubble = true;
这里的cancelBubble是 IE事件对象的属性定义:是否取消冒泡,设为true就可以了。
5.编码实战

function stopBubble(e) {
    //如果提供了事件对象,则这是一个非IE浏览器
   if ( e && e.stopPropagation )
      //因此它支持W3C的stopPropagation()方法
      e.stopPropagation();
  else
  //否则,我们需要使用IE的方式来取消事件冒泡
    window.event.cancelBubble = true;
}
//js
            var b = document.getElementById("321");
            b.addEventListener("click", function (e) {// 红色面板加事件
            a.style.display = "block";
             stopBubble(e);//这样就不会再冒泡给父级了 
            })
       	    document.onclick = function () {
            a.style.display = "none";
            }



在这里插入图片描述
6.扩展思考
如何阻止事件的默认行为?
阻止事件的默认行为可以运用下面方法:

1.e.preventDefault();

2.window.event.returnValue =false;

注:preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为。既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。什么元素有默认行为呢?如链接<a>,提交按钮等。当Event 对象的 cancelable为false时,表示没有默认行为,这时即使有默认行为,调用preventDefault也是不会起作用的。


                function stopDefault(e){
                         if(e && e.preventDefault){               //判断浏览器是非IE浏览器
                                  e.preventDefault();            //非IE浏览器下使用preventDefault方法
                         }else{
                                  //IE浏览器下令事件(window.event)的returnValue属性为false;
                                  window.event.returnValue = false;
                         }
                         return false;
                 }
                 //html
                 <a href="http://www.baidu.com" id="test">百度</a>
                 //js
                    window.onload = function(){

                 var test = document.getElementById('test');

                 test.onclick = function(e){                     //当单击此超链接时执行这个函数

                         alert('URL:' + this.href + ',不会跳转');

                         stopDefault(e);

                 }

        }

7.参考文献

JavaScript事件——冒泡、捕获
js事件(Event)之(四)阻止默认操作

8.更多讨论

return false;

可以利用return false;来阻止 事件冒泡和静默行为。
注意:javascript的return false只会阻止默认行为,而用jQuery的话则既阻止默认行为又防止对象冒泡。

//原生js,只会阻止默认行为,不会停止冒泡
var a = document.getElementById("testA");
a.onclick = function(){
    return false;//当然 也阻止了事件本身
};

//jQuery,既阻止默认行为又停止冒泡
$("#testA").on('click',function(){
    return false;//当然 也阻止了事件本身
});

既然return false 和 e.preventDefault()都是一样的效果,那它们有区别吗?当然有。
仅仅是在HTML事件属性 和 DOM0级事件处理方法中 才能通过返回 return false 的形式组织事件宿主的默认行为。

感谢大家观看!
今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值