js javascript 事件流 DOM2

原创于 2012-12-04 11:58:15 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #JavaScript #Javascript #js #JS #Js #事件 #冒泡 #捕获

本文详细介绍了从嵌入式开发转向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>

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