DOM事件冒泡机制以及阻止原理
已被阅读 1282 次 | 文章分类:html | 2018-02-26 01:08
dom节点元素是有层次结构的，如下div元素包含p元素，p元素包含button元素，所以元素触发事件也遵循冒泡机制，即触发事件会从子元素向父元素逐级上传，如果子元素触发了单击事件，那么也会触发父元素的单击事件，但有时候我们需要阻止这种事件冒泡机制
一:事件冒泡机制
下面实例DOM元素包容关系:Button->p->DIV->body->document->window,用具体的颜色区分开元素；
1:代码实例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>事件冒泡机制</title>
<style>
div {
background-color:gray;
}
p {
width:400px;
background-color:orange;
}
</style>
</head>
<body>
<div id="divTest">
<p id="pTest">
<input type="button" value="点击" id="btnTest" />
</p>
</div>
<script>
//为button元素绑定click事件
document.getElementById("btnTest").addEventListener("click", function (event)
{
console.log("点击了button元素");
});
//为p元素绑定click事件
document.getElementById("pTest").addEventListener("click", function (event) {
console.log("点击了p元素");
});
// 为div元素绑定click事件
document.getElementById("divTest").addEventListener("click", function (event) {
console.log("点击了div元素");
});
// 为body绑定click事件
document.getElementsByTagName("body")[0].addEventListener("click", function (event) {
console.log("点击了body元素");
});
// 为document绑定click事件
document.addEventListener("click", function (event) {
console.log("点击了document");
});
// 为windowt绑定click事件
window.addEventListener("click", function (event) {
console.log("点击了window");
});
</script>
</body>
</html>
2:点击效果;当我们点击button元素后显示如下效果:
二:阻止事件冒泡
阻止事件冒泡如下两种方式:一是设置event.cancelBubble=true;二是调用event.stopPropagation()方法
1.代码实例
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>事件冒泡阻止原理</title>
<style>
div {
background-color:gray;
}
p {
width:400px;
background-color:orange;
}
</style>
</head>
<body>
<div id="divTest">
<p id="pTest">
<input type="button" value="点击" id="btnTest" />
</p>
</div>
<script>
//为button元素绑定click事件
document.getElementById("btnTest").addEventListener("click", function (event)
{
console.log("点击了button元素");
// 阻止事件冒泡到DOM树上
event.stopPropagation(); // 只执行button的click，如果注释掉该行，将执行button、p和div的click
//event.cancelBubble = true;
});
//为p元素绑定click事件
document.getElementById("pTest").addEventListener("click", function (event) {
console.log("点击了p元素");
});
// 为div元素绑定click事件
document.getElementById("divTest").addEventListener("click", function (event) {
console.log("点击了div元素");
});
2.运行效果;为div、p、button三层DOM元素都添加click事件，但是通过event.stopPropagation()方法，我们可以阻止事件往上冒泡，event.cancelBubble = true方法具有相同效果；
