js里的事件传播--冒泡

最新推荐文章于 2025-03-24 01:20:06 发布

啊哈前端

最新推荐文章于 2025-03-24 01:20:06 发布

阅读量350

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/wuzhe128520/article/details/50908615

javascript 专栏收录该内容

62 篇文章

订阅专栏

本文详细解析了JavaScript中事件的传播机制，特别是事件冒泡的过程。通过具体的HTML实例展示了如何处理不同层级元素间的事件触发，并探讨了如何利用事件监听器来实现特定的功能。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>js事件的传播</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
    <p id="closer">final</p>
    <p id="onclickid" onclick="notarget(this)">直接在页面上使用onclick</p>
    <div id="larger" onclick="alert('larget')" style="width: 100px;height:100px;border: 1px solid red;">
    	<div id="biger" onclick="alert('bigger')" style="width: 50px;height: 50px;border: 1px solid green;position: relative;top: 50%;left: 50%;margin-left: -25px;margin-top: -25px;">
    		<div id="small" onclick="function(){alert('small')}" style="width: 25px;height: 25px;border: 1px solid blue;position: relative;top: 50%;left: 50%;margin-left: -12.5px;margin-top: -12.5px;">
    			
    		</div>
    	</div>
    </div>
    <script>
    function paraHandler(e){
    	alert("clicked paragraph");
    }
    var para=document.getElementById("closer");
    para.addEventListener('click',paraHandler,false);
    document.body.addEventListener("click",function(){
    	   alert("clicked body");
    },false);
    document.addEventListener("click",function(){
    	alert("clicked document");
    },false);
    window.addEventListener("click",function(){
    	alert("clicked window");
    },false);*/
    para.removeEventListener("click",paraHandler,false);//移除事件绑定
    //js中的事件都是向上冒泡的。子元素会触发它的父元素中相同的事件。
      直接在元素中用onclick="function(this){......}"绑定的事件，是没有e这个对象的，同时也会产生冒泡现象。
      当某个元素A绑定了click事件，同时document也绑定了click事件。A绑定的事件操作中如果直接移除掉了当前的dom对象，同时调用它的函数体还没有完成，那么即使在A元素的父元素上取消了冒泡，当前A元素还是会继续冒泡到document。
    </script>
</body>
</html>