JavaScript事件传播控制

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 事件传播控制 </title>
<style>
div{
width: 300px;
height: 50px;
background-color: red;
color: white;
}
</style>
</head>
<body>
<section>
<div>
<a href="https://www.baidu.com"> 这个可以点击 </a>
</div>
</section>
<script>
var div =document.querySelector('div')
var sec =document.querySelector('section')
document.documentElement.addEventListener('click',function(){alert ('HTML - 挖洞 ')},true)
document.documentElement.addEventListener('click',function(){alert ('HTML - 冒泡 ')},false)
document.body.addEventListener('click',function(){alert ('body - 挖洞 ')},true)
document.body.addEventListener('click',function(){alert ('body - 冒泡 ')},false)
sec.addEventListener('click',function(e){
alert ('section - 挖洞 ')
// e.stopPropagation()
// 停止事件传播即会停止挖洞过程也可以停止冒泡
// 不会影响同级别的事件监听者
// e.stopImmediatePropagation()
// 停止同级别的多个事件监听者的调用
// 不管用哪个方法都会停止挖洞或冒泡但都不会影响超链接跳转
// 超链接跳转是整个事件传播完成之后才进行跳转的
e.preventDefault()
// 阻止事件的默认行为如超链接跳转或表单提交时
// 使用 e.defaultPrevented 可以获取事件的默认行为是否已经被阻止
},true)
sec.addEventListener('click',function(e){
alert ('section - 挖洞 2')
// e.stopPropagation()
},true)
sec.addEventListener('click',function(e){
alert ('section - 冒泡 ')
// e.stopPropagation()
// alert(e.defaultPrevented) //true
e.defaultPrevented =false
// 不能将已阻止的默认行为恢复
},false)
div.addEventListener('click',function(){alert ('div - 挖洞 ')},true)
div.addEventListener('click',function(){alert ('div - 冒泡 ')},false)
// 第三个参数为 true 的时候监听者调用比较早设置 false 是比较晚
// 如果不传第三个参数监听者调用事件比较晚会在冒泡阶段调用
sec.onclick =function(){
alert (' 哪个阶段调用 ')
}
// 在冒泡阶段调用
</script>
</body>
</html>

发送评论编辑评论

分享到微信

发送评论 编辑评论

推荐文章

发送评论编辑评论