<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡和事件捕获</title>
<script>
/**
* 事件流:当一个HTML元素产生事件时,该事件会在当前元素与根元素之间按特定的顺序传播,所有经过的节点都会接收到该事件并执行,这个传播的过程就是DOM事件流
* 分类:事件冒泡、事件捕获
* 默认情况下,事件使用的是事件冒泡流
*/
/**
* 事件冒泡:事件从事件目标(事件源)开始 ,往上冒泡直接页面的根元素
* 特点:先触发子级元素的事件,再触发父级元素的事件
* 注意:一般的绑定事件的方式,采用的都是事件冒泡
*/
/*window.οnlοad=function(){
document.querySelector('#myP').οnclick=function(){
alert(444);
};
document.querySelector('#myDiv').οnclick=function(){
alert(555);
};
};*/
/**
* 事件捕获:事件从页面的根元素开始,往下到事件目标元素
* 特点:先触发父级元素的事件,再触发子级元素的事件
* 注意:可以通过addEventListener()函数进行事件绑定,绑定时可以指定采用事件冒泡还是事件捕获
*/
/*window.οnlοad=function(){
document.querySelector('#myP').addEventListener('click', function(){
alert(444);
},true); //第三个参数为true时表示采用事件捕获,false表示事件冒泡,默认为false
document.querySelector('#myDiv').addEventListener('click', function(){
alert(555);
},true);
};*/
/**
* 阻止事件冒泡
* 注:实际中,阻止事件捕获没有多大意义,所以基本上不会做阻止事件捕获的操作
*/
window.onload=function(){
document.querySelector('#myP').onclick=function(event){
alert(444);
//阻止事件冒泡
event.stopPropagation(); //W3C标准方式
// event.cancelBubble=true; //非标准方式
};
document.querySelector('#myDiv').onclick=function(){
alert(555);
};
};
/**
* 阻止事件的默认行为
*/
function do1(event){
console.log(111);
event.preventDefault();//阻止事件默认行为
}
function do2(event){
console.log(222);
event.preventDefault();
}
</script>
</head>
<body>
<!--
事件冒泡
点击span元素,先触发span的click事件,再触发p元素的click事件,最后触发div的click事件
-->
<div onclick="alert(333)">
<p onclick="alert(222)">
<span onclick="alert(111)">itany</span>
</p>
</div>
<hr>
<div id="myDiv">
<p id="myP">欢迎光临</p>
</div>
<hr>
<!-- 事件的默认行为,如:点击链接时默认会跳转 -->
<a href="#" onclick="do1(event)">hello</a>
<button oncontextmenu="do2(event)">右键点我</button>
</body>
</html>
js的事件冒泡和事件捕获
最新推荐文章于 2024-03-16 11:12:42 发布