js里的事件传播--冒泡

 

<!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>


你可能感兴趣的:(js里的事件传播--冒泡)