事件传递有两种方式:冒泡与捕获。事件传递定义了元素事件触发的顺序。
事件的第三个参数默认不写,就是false,是冒泡传播,若写true就是捕获传播。
如下例子是在div里面添加一个p标签。通过警告框的提示来判断事件的传播顺序。以及若何阻止这种传播。
a标签和表单是阻止事件传递的例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
background-color: beige;
}
p{
width: 200px;
height: 200px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="div1">
<p id="p1"></p>
</div>
<a href="http://www.baidu.com" "return click1()">百度</a>
<form action="" method="post" "return mysubmit()">
<input type="text" name="username" placeholder="请输入用户名" />
<input type="password" name="pwd" placeholder="请输入密码" />
<input type="submit" value="提交"/>
</form>
<script type="text/javascript">
div1.addEventListener("click",function(){
alert("触发了div的click");
// return false; 阻止默认行为
// event.stopPropagation(); //停止传播(冒泡或捕获)
},true);
p1.addEventListener("click",function(){
alert("触发了p的click");
// event.stopPropagation();//停止传播 冒泡传播
},true);
function click1(){
alert("你点击了a标签");
return false;//在a标签里也要加return 这样才能阻止默认的传播行为
}
function mysubmit(){
alert("马上要提交了");
return false;//同上
}
</script>
</body>
</html>
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄。