JS冒泡事件与事件捕获实例详解

本文实例分析了JS冒泡事件与事件捕获。分享给大家供大家参考,具体如下:

案例

<!DOCTYPE html>

<html>

<head>

<title>冒泡事件</title>

<script type="text/javascript">

window.onload = function(){

window.onclick = function(){

alert("Window"); // 顶级

};

document.onclick = function(){

alert("Document"); // 次顶级

};

document.documentElement.onclick = function(){

alert("Html"); // 次次顶级

};

document.body.onclick = function(){

alert("Body"); // 次次次顶级

};

document.getElementById("myDiv").onclick = function(){

alert("Div"); // 最先执行,并且会传递到上一层。点击两次,则按顺序执行两次。如果上级也有点击事件的话

};

}

</script>

</head>

<body>

<div id="myDiv">点我</div>

</body>

</html>

小结

1.点击myDiv。依次是Div-Body-Html-Document-Window

2.点击其他空白地方。依次是Html-Document-Window

3.连续点击两次,会按顺序执行两次

4.冒泡的前提是,父级也定义了相应的事件

再看一个更复杂的例子

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>事件捕捉</title>

<script type="text/javascript">

window.onload = function(){

window.addEventListener("click", function(){

alert("Window - true");

}, true); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行

document.addEventListener("click", function(){

alert("Document - true");

}, true);

document.documentElement.addEventListener("click", function(){

alert("Html - true");

}, true);

document.body.addEventListener("click", function(){

alert("Body - true");

}, true);

document.getElementById("myDiv").addEventListener("click", function(){

alert("Div - true");

}, true);

window.addEventListener("click", function(){

alert("Window - false");

}, false); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行

document.addEventListener("click", function(){

alert("Document - false");

}, false);

document.documentElement.addEventListener("click", function(){

alert("Html - false");

}, false);

document.body.addEventListener("click", function(){

alert("Body - false");

}, false);

document.getElementById("myDiv").addEventListener("click", function(){

alert("Div - false");

}, false);

window.onclick = function(){

alert("Window - click"); // 顶级

};

document.onclick = function(){

alert("Document - click"); // 次顶级

};

document.documentElement.onclick = function(){

alert("Html - click"); // 次次顶级

};

document.body.onclick = function(){

alert("Body - click"); // 次次次顶级

};

document.getElementById("myDiv").onclick = function(){

alert("Div - click"); // 最先执行,并且会传递到上一层。点击两次,则按顺序执行两次。如果上级也有点击事件的话

};

}

</script>

</head>

<body>

<div id="myDiv">点我</div>

</body>

</html>

小结

1.点击的执行结果是

Window - true

Document - true

Html - true

Body - true

Div - true

Div - false

Div - click

Body - false

Body - click

Html - false

Html - click

Document - false

Document - click

Window - false

Window - click

2.顺序与js代码顺序无关

3.就算没有定义点击事件,一样可以捕获点击事件,只要点击到,就能捕获到

再次改造,阻止冒泡

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>事件捕捉</title>

<script type="text/javascript">

window.onload = function(){

document.addEventListener("click", function(){

alert("Document - true");

}, true);

window.addEventListener("click", function(){

alert("Window - true");

}, true); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行

document.documentElement.addEventListener("click", function(){

alert("Html - true");

}, true);

document.body.addEventListener("click", function(){

alert("Body - true");

}, true);

document.getElementById("myDiv").addEventListener("click", function(){

alert("Div - true");

}, true);

window.addEventListener("click", function(){

alert("Window - false");

}, false); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行

document.addEventListener("click", function(){

alert("Document - false");

}, false);

document.documentElement.addEventListener("click", function(){

alert("Html - false");

}, false);

document.body.addEventListener("click", function(){

alert("Body - false");

}, false);

document.getElementById("myDiv").addEventListener("click", function(){

alert("Div - false");

}, false);

window.onclick = function(){

alert("Window - click"); // 顶级

};

document.onclick = function(){

alert("Document - click"); // 次顶级

};

document.documentElement.onclick = function(){

alert("Html - click"); // 次次顶级

};

document.body.onclick = function(){

alert("Body - click"); // 次次次顶级

};

document.getElementById("myDiv").onclick = function(){

alert("Div - click"); // 最先执行,并且会传递到上一层。点击两次,则按顺序执行两次。如果上级也有点击事件的话

event.stopPropagation(); // 阻止冒泡

};

}

</script>

</head>

<body>

<div id="myDiv">点我</div>

</body>

</html>

小结

Window - true

Document - true

Html - true

Body - true

Div - true

Div - false

Div - click

终止了,没有后续的内容了

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript时间与日期操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

以上是 JS冒泡事件与事件捕获实例详解 的全部内容, 来源链接: utcz.com/z/344895.html

回到顶部