事件捕获

最新推荐文章于 2024-04-17 11:31:34 发布

haha有仙女

最新推荐文章于 2024-04-17 11:31:34 发布

阅读量340

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/yiting123456789/article/details/78162147

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

事件在传递时，会有一个触发顺序。
注意：只有在标准浏览器下才有事件捕获的概念。

典型例子：

<style>
        *{margin:0;padding:0;font-family: Microsoft YaHei,serif;}
        li{list-style: none;}
        #box3{
            width:200px;
            height: 100px;
            background: pink;
        }
        #box2{
            padding:20px;
            background: red;
        }
        #box1{
            padding:20px;
            background: green;
        }
  </style>
<body>
<div id="box1">1
    <div id="box2">2
        <div>
            <div id="box3">3</div>
        </div>
    </div>
</div>
<script>
    box1.addEventListener("click",fn1，false)//默认为false
    box2.addEventListener("click",fn2)
    box3.addEventListener("click",fn3)
//点击box3时，依次打印3，2，1
//若都加上true，则依次打印1，2，3

    function fn1() {
        console.log(1)
    }
    function fn2() {
        console.log(2)
    }
    function fn3() {
        console.log(3)
    }

</script>
</body>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

haha有仙女

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件捕获

事件在传递时，会有一个触发顺序。注意：只有在标准浏览器下才有事件捕获的概念。典型例子：<style> *{margin:0;padding:0;font-family: Microsoft YaHei,serif;} li{list-style: none;} #box3{ width:200px;
复制链接

扫一扫