js javascript 事件流 DOM2

天晟

于 2012-12-04 11:58:15 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript JavaScript Javascript js JS Js 事件冒泡捕获

本文链接：https://blog.youkuaiyun.com/a324539017/article/details/8255144

本文详细介绍了从嵌入式开发转向Web领域的经历，通过实例展示了事件流的不同阶段（捕获、目标、冒泡），并利用FF浏览器运行代码，直观展示事件流过程。

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

从qt ，嵌入式方向的我彻底的转行了，web，这几天做梦都是js。。。

进去正题

eventPhase：调用事件处理程序的阶段，1捕获，2目标，3冒泡

请看图：

请看例子：

<html>
<body>
dom2 级事件流=》事件捕获->目标->事件冒泡（请用ff）
<br \>
<br \>
<div id=div>
<div id=div1>点我</div>
</div>

<script type="text/javascript">
var btn=document.getElementById('div');
var btn1=document.getElementById('div1');

btn1.addEventListener('click',function(event){alert(event.eventPhase+'div1内层--事件捕获');},true);
btn.addEventListener('click',function(event){alert(event.eventPhase+'div外层--事件冒泡');},false);
btn1.addEventListener('click',function(event){alert(event.eventPhase+'div1内层--事件冒泡');},false);
btn.addEventListener('click',function(event){alert(event.eventPhase+'div外层--事件捕获');},true);

</script>

</body>
</html>

运行程序就都懂了，不用废话了！