JavaScript （九）事件冒泡

最新推荐文章于 2024-07-08 08:31:14 发布

We_jia

最新推荐文章于 2024-07-08 08:31:14 发布

阅读量236

点赞数

分类专栏： JavaScript 文章标签：事件冒泡阻止事件冒泡默认事件行为

本文链接：https://blog.csdn.net/We_jia/article/details/85252315

版权

JavaScript 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

事件冒泡

事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。也就是说在事件冒泡中，最内部的元素将首先触发其事件，然后是栈内的下一个元素触发该事件，以此类推，直到到达最外面的元素。

案例

web页面中有俩个div元素，一个位于另一个的内部。这俩个元素和document对象都指定了针对mousedown事件的事件处理程序。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function (){   /* 窗体加载完成事件*/
            f=document.getElementById ("first");   /* 为div设置Dom0级事件处理程序*/
            f.onmousedown =function(){
                alert("first");
            }
            s=document.getElementById ("second");
            s.onmousedown =function(){
                alert("second");
            }
            document.onmousedown=function (){
                alert("document");
            }
        }
    </script>
</head>
<body>
<div id="first" style="padding: 20px;background-color:#ff0;width: 300px;height: 300px">
    <div  id="second" style="background-color:#f00;width: 200px;height: 200px;border:1px dashed #000;"></div>
</div>

</body>
</html>

如果单击页面中最里面的div元素，不论哪种浏览器都会弹出3个警告窗口，内容为first,second,document。

阻止事件冒泡

在上边的案例中，如果你只希望某个div有mousedown事件，那就要进行冒泡事件的阻止。

我们给最里面的second div进行冒泡阻止，那么他的父类first以及document就不会冒泡,浏览器只会显示一个警告窗口，内容为second。

   s=document.getElementById ("second");
   s.onmousedown =function(){

          alert("second");
          event.stopPropagation();

      }

总结

event.stopPropagation();

事件处理过程中，阻止事件冒泡，但不会阻止默认行为

return false;

事件处理过程中，阻止默认行为

event.preventDefault();

事件处理过程中，不阻止事件冒泡，但阻止默认行为

默认事件

在浏览器的空白页面右击时会出现一个提示框，实际上这是用的document.oncontextmenu属性，如果用下面的代码就能够阻止这样的默认行为：

    <script>
        window.onload = function(){
            //document.oncontextmenu 右击事件
            document.oncontextmenu = function(e){
                alert('342');
                return false;//阻止默认行为（默认事件）
            }
        }
    </script>