JavaScript之EventListener事件的传递顺序--冒泡和捕获传播
addEventListener() 方法
在用户点击按钮时触发监听事件：
document.getElementById("myBtn").addEventListener("click", displayDate);第一个参数是事件的类型 (如 "click" 或 "mousedown"). 把on去掉
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
下面的例子是演示监听事件的传播顺序以及如何阻止这种传播。
冒泡和捕获传播
<!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" onclick="return click1()">百度</a>
<form action="" method="post" onsubmit="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>
