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>

发送评论编辑评论

发送评论 编辑评论

推荐文章

发送评论编辑评论