当前位置: 首页 > news >正文

JavaScript事件捕获与事件冒泡原理

原文地址:http://blog.sina.com.cn/s/blog_6c07dac30100lkw8.html 

 

 

支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法,基中第3个参数useCapture是一个Boolean值,用来设置事件是在事件捕获时执行,还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法,此方法没有相关设置,不过IE的事件模型默认是在事件冒泡时执行的,也就是在useCapture等于false的时候执行,所以把在处理事件时把useCapture设置为false是比较安全,也实现兼容浏览器的效果。


看下图:

事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。
事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。

通过一个例子可以很好的理解这种原理
html:
<ul id="news">
    <li>
      <h3><a href="news.php?item=1">Title 1</a></h3>
      <p>Description 1</p>
      <p class="more"><a href="news.php?item=1">link 1</a></p>
    </li>
</ul>
JavaScript:
<script type="text/javascript">
bubbleTest={
      init:function(){
          if(!document.getElementByIdx_x_x || !document.create_r_rTextNode){return;}
          bubbleTest.n=document.getElementByIdx_x_x('news');
          if(!bubbleTest.n){return;}
          bubbleTest.addMyListeners('click',bubbleTest.liTest,'li');
          bubbleTest.addMyListeners('click',bubbleTest.aTest,'a');
          bubbleTest.addMyListeners('click',bubbleTest.pTest,'p');
      },
      addMyListeners:function(eventName,functionName,elements){
          var temp=bubbleTest.n.getElementsByTagName_r(elements);
          for(var i=0;i<temp.length;i++){
              temp[i].addEventListener(eventName,functionName,true);
          }
      },
      liTest:function(e){
          alert('li was clicked');
      },
      pTest:function(e){
          alert('p was clicked');
      },
      aTest:function (e){
          alert('a was clicked');
      }
}
window.addEventListener('load',bubbleTest.init,false);
</script>
 
如果给useCapture设置为true,点击link 1时会依次弹出:
temp[i].addEventListener(eventName,functionName, true);
第1次:  li was clicked
第2次:   p was clicked
第3次:   a was clicked

如果给useCapture设置为false,点击link 1时会依次弹出:
temp[i].addEventListener(eventName,functionName, false);
第1次:  a was clicked
第2次:   p was clicked
第3次:   li was clicked

结果正好相反,由此例可以看出事件捕获与事件冒泡实际效果。

相关文章:

  • Nebula3的渲染流程
  • jquery 小记
  • 使用asx3m与xstream配合解决flex与java利用httpservice传递xml数据问题
  • 你必须知道的最好的开源WEB 资源
  • 四种流行的AJAX框架jQuery,Mootools,Dojo,ExtJS的对比
  • 平衡二叉查找树(AVL)
  • 数据结构之链栈 C++实现
  • C#中用NamedPipe进程间通信
  • C++类四个默认函数---构造函数、析构函数、拷贝函数、赋值函数
  • 实现两个DataTable的联合查询
  • 数学之美:GOOGLE新闻归类算法与余弦定理
  • 数据中心面临IT绩效管理的更高挑战
  • 如何确定网页和查询的相关性
  • 使用线性探测法构造哈希表
  • AjaxGWT
  • 【译】JS基础算法脚本:字符串结尾
  • 0基础学习移动端适配
  • 4个实用的微服务测试策略
  • CNN 在图像分割中的简史:从 R-CNN 到 Mask R-CNN
  • download使用浅析
  • E-HPC支持多队列管理和自动伸缩
  • express.js的介绍及使用
  • flutter的key在widget list的作用以及必要性
  • gitlab-ci配置详解(一)
  • Linux编程学习笔记 | Linux IO学习[1] - 文件IO
  • python_bomb----数据类型总结
  • ReactNativeweexDeviceOne对比
  • Spring声明式事务管理之一:五大属性分析
  • XML已死 ?
  • 职业生涯 一个六年开发经验的女程序员的心声。
  • 最简单的无缝轮播
  • HanLP分词命名实体提取详解
  • 阿里云API、SDK和CLI应用实践方案
  • 完善智慧办公建设,小熊U租获京东数千万元A+轮融资 ...
  • 昨天1024程序员节,我故意写了个死循环~
  • # .NET Framework中使用命名管道进行进程间通信
  • $().each和$.each的区别
  • (4)事件处理——(7)简单事件(Simple events)
  • (Matalb时序预测)PSO-BP粒子群算法优化BP神经网络的多维时序回归预测
  • (笔试题)分解质因式
  • (附源码)spring boot网络空间安全实验教学示范中心网站 毕业设计 111454
  • (附源码)ssm基于jsp高校选课系统 毕业设计 291627
  • (附源码)ssm失物招领系统 毕业设计 182317
  • (附源码)计算机毕业设计高校学生选课系统
  • (论文阅读31/100)Stacked hourglass networks for human pose estimation
  • (转)负载均衡,回话保持,cookie
  • (转载)Google Chrome调试JS
  • *setTimeout实现text输入在用户停顿时才调用事件!*
  • .libPaths()设置包加载目录
  • .NET上SQLite的连接
  • .NET委托:一个关于C#的睡前故事
  • .NET中使用Redis (二)
  • [ vulhub漏洞复现篇 ] AppWeb认证绕过漏洞(CVE-2018-8715)
  • [BZOJ4554][TJOI2016HEOI2016]游戏(匈牙利)
  • [FTP]pureftp部署和优化