JavaScript 事件冒泡

最新推荐文章于 2023-04-25 15:08:18 发布

houyanhua1

最新推荐文章于 2023-04-25 15:08:18 发布

阅读量181

点赞数

分类专栏： JavaScript 文章标签： javascript 事件冒泡

本文链接：https://blog.csdn.net/houyanhua1/article/details/79594213

版权

JavaScript 专栏收录该内容

140 篇文章 4 订阅

订阅专栏

事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload、onmouseenter、onmouseleave

demo.html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box1 {
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .box2 {
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }


    </style>
</head>
<body>

<div class="box1" id="box1">
    <div class="box2">
        <div class="box3"></div>
    </div>
</div>

<script>

    var box1 = document.getElementById("box1");
    var box2 = box1.children[0];
    var box3 = box2.children[0];

   //事件冒泡(先触发子元素，后触发父系元素):   div-> body-> html-> document(-> window)
   box1.ondblclick = function () {
       alert("我是box1");
   }

   box2.ondblclick = function () {
       alert("我是box2");
   }

   box3.ondblclick = function () {
       alert("我是box3");
   }

   document.ondblclick = function () {
       alert("我是document");
   }

   //事件捕获(先触发父系元素，后触发子元素):  (window->) document-> html-> body-> div
   box1.addEventListener("click", function () {
       alert("我是box1");
   },true);

   box2.addEventListener("click", function () {
       alert("我是box2");
   },true);

   box3.addEventListener("click", function () {
       alert("我是box3");
   },true);

   document.addEventListener("click", function () {
       alert("我是document");
   },true);


</script>

</body>
</html>