代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>
<div id="d1">
<button id="btn1">点我</button>
</div>
</p>
<script>
document.getElementById("btn1").addEventListener("click",showType);
function showType(btn1) {
alert(btn1.type);
// 调用type属性,返回事件的类型
}
</script>
<p>
<div id="d2">
<button id="btn2">点我</button>
</div>
</p>
<script>
document.getElementById("btn2").addEventListener("click",showTarget);
document.getElementById("d2").addEventListener("click",text);
function showTarget(btn2) {
alert(btn2.target);
// 调用type属性,返回事件的类型
btn2.stopPropagation();
//阻止事件冒泡,也就是包含此事件对象的父类事件不再执行
//阻止事件的默认行为,用法同上,阻止a标签跳转网页等行为
}
function text(btn2) {
alert("事件冒泡")
}
</script>
</body>
</html>
没有去除事件冒泡效果:
去除事件冒泡之后: