您的位置：首页 > Web前端

WEB前端 | JS基础——(9-3)事件冒泡与绑定

2016-11-11 19:03 585 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web前端 javascript 事件冒泡绑定

相关文章推荐

新的分享

章节导航