您的位置：首页 > Web前端 > HTML

南哥带你学 HTML 之事件捕获和冒泡以及事件的绑定

2018-03-16 19:53 351 查看

事件捕获和冒泡

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件捕获和冒泡</title>
<style type="text/css">
.box{
width: 600px;
height: 600px;
margin: 0 auto;
background-color: red;
overflow: hidden;
}
.mid{
width: 400px;
height: 400px;
margin: 100px;
background-color: gold;
overflow: hidden;
}
.item{
width: 200px;
height: 200px;
background-color: blue;
margin: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="mid">
<div class="item"></div>
</div>
</div>
</body>
<script type="text/javascript">
var box = document.getElementsByClassName("box")[0];
var mid = document.getElementsByClassName("mid")[0];
var item = document.getElementsByClassName("item")[0];
// 事件冒泡 - 阻止事件冒泡
box.addEventListener("click", function(){
console.log("box");
}, false);
mid.addEventListener("click", function(){
console.log("mid");
}, false);
// item.addEventListener("click", function(){
//  console.log("item");
// }, false);
item.addEventListener("click", function(ev){
// 取消冒泡 不让事件继续
ev.cancelBubble = true; // 第一种
ev.stopPropagation(); // 第二种
// 兼容写法
if (ev.stopPropagation) {
ev.stopPropagation();
} else{
ev.cancelBubble = true;
}
console.log("小明");
// 阻止默认事件
ev.preventDefault(); // 第一种
ev.returnValue = false; // 第二种
return false; // 第三种
}, false);
</script>
</html>

事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
background-color: black;
}
.redDiv{
width: 200px;
height: 200px;
background-color: red;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="redDiv"></div>
</body>
<script type="text/javascript">
var redDiv = document.getElementsByClassName("redDiv")[0];
// 事件绑定 -> 给一个元素绑定多个相同事件
redDiv.addEventListener("click", f1, false);
redDiv.addEventListener("click", f2, false);
function f1(){
console.log(1);
}
function f2(){
console.log(2);
}
// 移除事件绑定
redDiv.removeEventListener("click", f2, false);
</script>
</html>

http://blog.csdn.net/huzongnan/article/list

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

标签：

相关文章推荐

新的分享

章节导航

南哥带你学 HTML 之 事件捕获和冒泡以及事件的绑定

事件捕获和冒泡

事件绑定

南哥带你学 HTML 之事件捕获和冒泡以及事件的绑定