收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > JS基础入门 > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

一篇文章让你彻底弄懂JS的事件冒泡和事件捕获

在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获。当时的我,把它当成IE浏览器兼容问题,所以没有深究(IE8以下版本的浏览器已基本退出市场)。工作至今,虽然多次遇到该类问题,但均未深究,始终一知半解,遇到了全TM靠猜(选A不行就选B呗)。今天闲来无事自己做了个demo,算是把这个问题彻底搞明白了。

先上结论:他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。相反的,事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡,意思就是到我为止,我的爹和祖宗的事件就不要触发了。

这是HTML结构

  <div id="parent">
    <div id="child" class="child"></div>
  </div>

现在我们给它们绑定上事件

  document.getElementById("parent").addEventListener("click",function(e){
  alert("parent事件被触发,"+this.id);
  })
  document.getElementById("child").addEventListener("click",function(e){
  alert("child事件被触发,"+this.id)
  })

结果:

child事件被触发,child
parent事件被触发,parent

结论:先child,然后parent。事件的触发顺序自内向外,这就是事件冒泡。

现在改变第三个参数的值为true

   document.getElementById("parent").addEventListener("click",function(e){
  alert("parent事件被触发,"+e.target.id);
  },true)
  document.getElementById("child").addEventListener("click",function(e){
  alert("child事件被触发,"+e.target.id)
  },true)

结果:

parent事件被触发,parent
child事件被触发,child

结论:先parent,然后child。事件触发顺序变更为自外向内,这就是事件捕获。

貌似没什么卵用,上一个利用事件冒泡的案例,反正我是经常会用到。

  <ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
 </ul>

需求是这样的:鼠标放到li上对应的li背景变灰。

利用事件冒泡实现:

  $("ul").on("mouseover",function(e){
   $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
  })

也许有人会说,我们直接给所有li都绑上事件也可以啊,一点也不麻烦,只要……

   $("li").on("mouseover",function(){
   $(this).css("background-color","#ddd").siblings().css("background-color","white");
  })

是,这样也行。而且从代码简洁程度上,两者是相若仿佛的。但是,前者少了一个遍历所有li节点的操作,所以在性能上肯定是更优的。
还有就是,如果我们在绑定事件完成后,页面又动态的加载了一些元素……

$("<li>item7</li>").appendTo("ul");
这时候,第二种方案,由于绑定事件的时候item7还不存在,所以为了效果,我们还要给它再绑定一次事件。而利用冒泡方案由于是给ul绑的事件……
高下立判!

以上就是小编为大家整理的js事件冒泡事件捕获的详细介绍的内容啦。希望大家继续支持积木网~

带你了解session和cookie作用原理区别和用法
Cookie概念在浏览某些网站时,这些网站会把一些数据存在客户端,用于使用网站等跟踪用户,实现用户自定义功能.是否设置过期时间:如果不设置过期时间,

JS传播事件、取消事件默认行为、阻止事件传播详解
1.事件处理程序的返回值通常情况下,返回值false就是告诉浏览器不要执行这个事件相关的默认操作。例如,表单提交按钮的onclick事件处理程序能通过返

带你快速理解javascript中的事件模型
javascript中有两种事件模型:DOM0,DOM2。而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些。一.DOM0级事件模型DOM

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号