事件的冒泡

事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点，所有浏览器都支持冒泡除IE5.5外，均一直冒泡到window

绑定冒泡事件

<style>
			#c{
				background-color: pink;
				height: 100px;
				width: 100px;
			}
			#b{
				background-color: palegreen;
				height: 200px;
				width: 200px;
			}
			#a{
				background-color: paleturquoise;
				height: 300px;
				width: 300px;
			}
		</style>
	</head>
	<body>
		<div id="a">
			<div id="b">
				<div id="c">					
				</div>
			</div>
		</div>		
	</body>

//加载事件
window.onload=function(){
	//为c绑定事件
	document.getElementById("c").onclick=function(){
		alert("c的事件")	
	}
	document.getElementById("b").onclick=function(){
		alert("b的事件")	
	}
	document.getElementById("a").onclick=function(){
		alert("a的事件")	
	}
}

以上方式就是事件冒泡现象，触发了子元素的事件，那么父元素的同类型事件也逐级被触发，可以阻止事件的冒泡

阻止事件的冒泡

event.stopPropagation();

//加载事件
window.onload=function(){
	//为c绑定事件
	document.getElementById("c").onclick=function(){
		alert("c的事件")	
	}
	document.getElementById("b").onclick=function(){
		alert("b的事件")	
		//使用内置对象阻止事件冒泡
		event.stopPropagation();
	}
	document.getElementById("a").onclick=function(){
		alert("a的事件")	
	}
}

监听事件绑定

//加载事件
window.onload=function(){
	//为c绑定事件
	document.getElementById("c").addEventListener("click",function(){
		alert("c的事件")	
	})
	document.getElementById("b").addEventListener("click",function(){
		alert("b的事件")	
	})
	document.getElementById("a").addEventListener("click",function(){
		alert("a的事件")	
	})
}

关键字的使用

function fun(){
	//如果在函数中声明变量加上了var关键字表示一个局部变量
	//如果不加上var关键字则表示全局变量
	for (i=0;i<10;i++) {
		console.log("i的值是："+i);
	}
}
//调用函数
fun();
alert("最终i="+i);

事件的冒泡
如果在函数中使用var声明变量则是一个局部变量
不使用var声明则是全局变量

事件的冒泡

文章目录

事件的冒泡

绑定冒泡事件

阻止事件的冒泡

监听事件绑定

关键字的使用

相关推荐