有关事件冒泡、事件捕获、阻止默认事件

最新推荐文章于 2024-06-22 15:02:51 发布

不药而愈？

最新推荐文章于 2024-06-22 15:02:51 发布

阅读量197

点赞数 1

文章标签：事件冒泡、事件捕获、阻止默认事件

本文链接：https://blog.csdn.net/qq_40984609/article/details/100568138

版权

1、事件冒泡：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。通俗来讲就是，就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作，但是父div的onclick事件同样会被触发。
代码演示如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>事件冒泡测试</title>
        <meta charset="UTF-8">
        <!-- 宽度自动适配 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
        div{padding:50px;}
        #div1{background: rgb(112, 117, 117);}
        #div2{background: #c57e87}
        #div3{background: rgb(97, 219, 219)}
        </style>
        <!-- 事件冒泡 -->
        <script>
            window.onload =  function bubble(){
                var odiv1 = document.getElementById("div1");
                var odiv2 = document.getElementById("div2");
                var odiv3 = document.getElementById("div3");
                function bubble1(){
                    alert("我是div1");
                }
                function bubble2(){
                    alert("我是div2");
                }
                function bubble3(){
                    // 阻止事件冒泡
                    // var en = ev || event;
                    // en.cancleBubble = true;
                    alert("我是div3");
                }
                odiv1.onclick = bubble1;
                odiv2.onclick = bubble2;
                odiv3.onclick = bubble3;
            }
        </script>    
    </head>
    <body>
        <div id="div1">1
            <div id="div2">2
                <div id="div3">3</div>
            </div>
        </div>
    </body>
</html>

效果如图所示：
在这里插入图片描述
2、事件捕获：从顶层元素到目标元素或者从目标元素到顶层元素，和事件冒泡是一个相反的过程。事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
代码演示如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>事件捕获测试</title>
        <meta charset="UTF-8">
        <!-- 宽度自动适配 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
        div{padding:50px;}
        #div1{background: rgb(112, 117, 117);}
        #div2{background: #c57e87}
        #div3{background: rgb(97, 219, 219)}
        </style>
        <!-- 事件捕获 -->
        <script>
            window.onload = function capture(){
            var odiv1 = document.getElementById("div1");
            var odiv2 = document.getElementById("div2");
            var odiv3 = document.getElementById("div3");
            // 参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。
            odiv1.addEventListener("click",function capture(){
                alert("我是div1");
            },true)
            odiv2.addEventListener("click",function capture(){
                alert("我是div2");
            },true)
            odiv3.addEventListener("click",function capture(){
                alert("我是div3");
            },true)
        }
        </script>        
    </head>
    <body>
        <div id="div1">1
            <div id="div2">2
                <div id="div3">3</div>
            </div>
        </div>
    </body>
</html>

效果如图所示：
在这里插入图片描述
3、阻止默认事件：
（1）阻止事件冒泡：

function bubble3(){
	// 阻止事件冒泡
	var en = ev || event;
	en.cancleBubble = true;
	alert("我是div3");
}

（2）第三个参数若是true，则表示采用事件捕获，
若是false，则表示采用事件冒泡。

	odiv1.addEventListener("click",function capture(){
		alert("我是div1");
	},true)
	odiv2.addEventListener("click",function capture(){
		alert("我是div2");
	},true)
	odiv3.addEventListener("click",function capture(){
		alert("我是div3");
	},true)

改为：

	odiv1.addEventListener("click",function capture(){
		alert("我是div1");
	},false)
	odiv2.addEventListener("click",function capture(){
		alert("我是div2");
	},false)
	odiv3.addEventListener("click",function capture(){
		alert("我是div3");
	},false)

不药而愈？

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有关事件冒泡、事件捕获、阻止默认事件

1、冒泡事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。通俗来讲就是，就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作，但是父div的onclick事件同样会被触发。...
复制链接

扫一扫