HTML 之事件捕获和冒泡以及事件的绑定

最新推荐文章于 2023-05-30 11:47:38 发布

一個頭像用四年

最新推荐文章于 2023-05-30 11:47:38 发布

阅读量183

点赞数

文章标签： html

本文链接：https://blog.csdn.net/huzongnan/article/details/79586148

版权

事件捕获和冒泡

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件捕获和冒泡</title>
        <style type="text/css">
            .box{
                width: 600px;
                height: 600px;
                margin: 0 auto;
                background-color: red;
                overflow: hidden;
            }
            .mid{
                width: 400px;
                height: 400px;
                margin: 100px;
                background-color: gold;
                overflow: hidden;
            }
            .item{
                width: 200px;
                height: 200px;
                background-color: blue;
                margin: 100px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="mid">
                <div class="item"></div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var box = document.getElementsByClassName("box")[0];
        var mid = document.getElementsByClassName("mid")[0];
        var item = document.getElementsByClassName("item")[0];
        // 事件冒泡 - 阻止事件冒泡
        box.addEventListener("click", function(){
            console.log("box");
        }, false);
        mid.addEventListener("click", function(){
            console.log("mid");
        }, false);
        // item.addEventListener("click", function(){
        //  console.log("item");
        // }, false);
        item.addEventListener("click", function(ev){
            // 取消冒泡 不让事件继续
            ev.cancelBubble = true; // 第一种
            ev.stopPropagation(); // 第二种
            // 兼容写法
            if (ev.stopPropagation) {
                ev.stopPropagation();
            } else{
                ev.cancelBubble = true;
            }
            console.log("小明");
            // 阻止默认事件
            ev.preventDefault(); // 第一种
            ev.returnValue = false; // 第二种
            return false; // 第三种
        }, false);
    </script>
</html>

事件绑定

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件绑定</title>
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
                background-color: black;
            }
            .redDiv{
                width: 200px;
                height: 200px;
                background-color: red;
                margin: 20px auto;
            }
        </style>
    </head>
    <body>
        <div class="redDiv"></div>
    </body>
    <script type="text/javascript">
        var redDiv = document.getElementsByClassName("redDiv")[0];
        // 事件绑定 -> 给一个元素绑定多个相同事件
        redDiv.addEventListener("click", f1, false);
        redDiv.addEventListener("click", f2, false);
        function f1(){
            console.log(1);
        }
        function f2(){
            console.log(2);
        }
        // 移除事件绑定
        redDiv.removeEventListener("click", f2, false);
    </script>
</html>

http://blog.csdn.net/huzongnan/article/list

一個頭像用四年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 之事件捕获和冒泡以及事件的绑定

事件捕获和冒泡&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;事件捕获和冒泡&lt;/title&gt; &lt;style type="te
复制链接

扫一扫