WEB前端 | JS基础——(9-3)事件冒泡与绑定_前端绑定冒号和艾特-CSDN博客

本文链接：https://blog.csdn.net/Erosvan/article/details/53131532

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>事件冒泡和绑定</title>
		<style type="text/css">
			#reddiv {
				width: 600px;
				height: 400px;
				background-color: red;
			}
			#bluediv {
				width: 400px;
				height: 200px;
				background-color: blue;
				margin: 100px;
			}
			#greendiv {
				width: 300px;
				height: 100px;
				background-color: green;
				margin: 50px;
			}
		</style>
	</head>
	<body>
		<div id="reddiv">
			<div id="bluediv">
				<div id="greendiv">
					
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		// 事件冒泡
		var reddiv = document.getElementById('reddiv');
		var bluediv = document.getElementById('bluediv');
		var greendiv = document.getElementById('greendiv');
		reddiv.onclick = function() {
			console.log('点击了红色的div');
		}
		bluediv.onclick = function(ev) {
			ev.cancelBubble = true;
			console.log('点击了蓝色的div');
		}
		greendiv.onclick = function(ev) {
//			ev.cancelBubble = true;
			console.log('点击了绿色的div');
		}
		
		//事件绑定 type 不含on (IE 含on)
		bluediv.addEventListener('click',function() {
			console.log(1);
		},false)
	</script>
</html>