W3C事件模型中事件捕捉和事件冒泡的执行顺序

最新推荐文章于 2023-02-16 12:02:02 发布

转载最新推荐文章于 2023-02-16 12:02:02 发布 · 298 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bsqdevspace/p/3641239.html

文章标签：

#xhtml #javascript #面试 #ViewUI

本文通过测试案例探讨了在不同DOM元素上设置事件捕捉与事件冒泡时的触发顺序。发现对于子元素触发事件时，事件捕捉总是先于事件冒泡发生；而对于直接绑定事件的元素，则触发顺序不确定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前两天看到一道面试题说如果给一个DOM元素既添加单击操作的事件捕捉回调函数，也添加事件冒泡的回调函数，问先调用哪一个？

自己做了一个简单的测试程序进行验证。测试环境：chrome: Version 33.0.1750.154 m

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">

function initialize() {
var father = document.getElementById("father");

father.addEventListener("click", function () {
alert("Click event is bubbled.father is clicked.");
}, false);

father.addEventListener("click", function () {
alert("Click event is captured.father is clicked.");
}, true);

}
</script>
</head>
<body onload="initialize()" >
<div id="grandFather" style="position:relative; background: #ffd800;width:300px;height:300px;">
<p>grandFather</p>
<div id="father" style="position:absolute; background: #4cff00;width:200px;height:200px;left:50px;top:50px;" >
<p>father</p>
<div id="child" style="position:absolute; background: #0094ff;width:100px;height:100px;left:50px;top:50px;">
<p>child</p>
</div>
</div>
</div>
</body>
</html>