js事件冒泡
当你给一个节点添加一个事件时，在这个事件被触发时该事件会沿着父节点向上传播只到传播到根节点时停止。在这个过程中所有传播到的节点上有这个事件时（第一个节点触发的事件）都会被触发，这就是事件传播。
冒泡事件是默认的处理方式。
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="myDiv">Click me</div>
</body>
<script type="text/javascript">
var myDiv = document.getElementById('myDiv');
myDiv.onclick=function(){
alert('div元素')
}
var body1 = document.getElementsByTagName('body')[0]
body1.onclick=function(){
alert('body元素')
}
var html1 = document.getElementsByTagName('html')[0]
html1.onclick=function(){
alert('html元素')
}
</script>
</html> 当你单击了页面中的<div>元素后，这个click事件会按照如下顺序传播
Element div
Element body
Element html
Document
从<div元素沿着DOM树向上传播（但是不同的浏览器不同的版本是有着细微的差别的，有的会冒泡到window对象）只要这个元素上存在该事件（这里是click事件）就会触发该事件。
js事件捕获
捕捉和冒泡是传播的方向是相反的。
还是上面的例子
当你单击了页面中的<div>元素后，这个click事件会按照如下顺序传播
Document
Element html
Element body
Element div
先触发Document上的再依次往下传播最终到 用户触发的那个元素节点（这里是<div>元素）。
阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="myDiv">Click me</div>
</body>
<script type="text/javascript">
var myDiv = document.getElementById('myDiv');
myDiv.onclick=function(e){
alert('div元素')
var ev = e || window.event;
if(ev && ev.stopPropagation) {
//非IE浏览器
ev.stopPropagation();
} else {
//IE浏览器(IE11以下)
ev.cancelBubble = true;
}
}
var body1 = document.getElementsByTagName('body')[0]
body1.onclick=function(){
alert('body元素')
}
var html1 = document.getElementsByTagName('html')[0]
html1.onclick=function(){
alert('html元素')
}
</script>
</html>点击 "运行实例" 按钮查看在线实例
这里介绍两个函数
addEventListener(event, listener, useCapture) 给元素追加事件
event ：事件（如：click,等）必填
listener：函数 当触发上面的事件时要执行代码。（这里一般写函数名来调用函数） 必选
useCapture：若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。
removeEventListener(type, listener, useCapture) 移除追加的事件
type：事件（如：click,等）必填
listener：函数
useCapture：若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。
你有可能会移除失败。原因是removeEventListener与addEventListener中的参数必须相同而且 listener 函数必须使用函数名来调用不能直接写 function 来定义，因为在内存中的位置不同，removeEventListener会认为是不同的 函数所以会移除失败。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
