Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

事件的Capture传递与冒泡传递

  当我们点击网页上的一个元素时候,这个元素上绑定的点击事件就会被触发。可是这仅仅是我们能看到的部分。从HTML的结构上看来,元素在文档中的位置是被层层嵌套的,引擎不可能瞬间就找到这个绑定了点击事件的元素。当点击时候,它必须从外层到内层元素逐步精确这个绑定了点击事件的元素。这个从外层向内层元素逐步精确的过程称为“Capture传递”(phase我翻译为了“传递”)。Capture传递的过程不会触发普通方式绑定的事件,而只会触发绑定事件时的useCapture参数为true的事件。所以我们平时使用的普通事件中很难观察到这个Capture传递的存在。
  Capture传递会在找到我们点击的那个元素后停止,这时被点击元素的事件会触发。并且在它触发之后这个事件会被向外层传递。这个从触发元素向外层传递事件的过程称为冒泡传递。冒泡传递和Capture传递相反,它会把途经的绑定事件时没有设置useCapture为ture的事件触发起来。

<style>
div {border:1px solid #CCC;padding:20px;float:left;}
</style>
<div id="capture">
  <div class="a">
    <div class="b">
      <div class="c">Capture传递</div>
    </div>
  </div>
</div>
<div id="bubble">
  <div class="a">
    <div class="b">
      <div class="c">冒泡传递</div>
    </div>
  </div>
</div>
<script>
var capture,bubble,i,o,s;
capture=document.getElementById("capture");
bubble=document.getElementById("bubble");
//useCapture=true
s=capture.getElementsByTagName("div");
for(i=0;o=s[i];i++)
  o.addEventListener("click",function(e){
    console.log("Capture",this.className);
  },true);
//useCapture=false
s=bubble.getElementsByTagName("div");
for(i=0;o=s[i];i++)
  o.addEventListener("click",function(e){
    console.log("Bubble",this.className);
  },false);
</script>

  通过这个例子就可以很清楚的看出,Capture传递是从外到内的,而冒泡是从内到外的。和冒泡传递一样,Capture传递时我们也可以使用stopPropagation来停止事件的传递。在上面例子的事件函数体中加入“e.stopPropagation();”就可以测试出结果。这里我就不截图了。最后是W3C上的相关资料的连接:
  http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^