先上结论:在事件执行流中有两种执行方式。一种是事件冒泡(即事件的执行顺序是从下往上执行的) ;  另一种是捕获(即事件的执行顺序是从上往下执行的);

阻止事件冒泡:   return false;  火狐/ie都支持

function(even){

var ev=even||window.even;

if(ev&&ev.stopPropagation){

ev.stopPropagation();

}else{

window.event.cancelBubble=true;

}

}

这是HTML结构

1
2
3
<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背景变灰。

利用事件冒泡原理实现事件委托/事件代码:

事件代理解决两个问题:

1:减少对后代元素的遍历操作

2:后期动态生成的后代元素也可以使用绑定的事件

       $("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的事件冒泡和事件捕获的更多相关文章

  1. js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获

    js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获 一.总结 一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件 ...

  2. 彻底弄懂JS的事件冒泡和事件捕获(不推荐阅读)

    由于搬去敌台了,好久没来博客园,今天无意中翻到有“误认子弟”的评论,这里特意做个说明. 本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jquery去展示了利用事件冒泡的例子有误,其 ...

  3. 彻底弄懂JS事件委托的概念和作用

    一.写在前头    接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的 ...

  4. JS事件(事件冒泡和事件捕获)

    事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用 ...

  5. JS事件冒泡与事件捕获怎么理解?

    在js中存在事件冒泡与事件捕获两种概念,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. 事件冒泡(dubbed bubbling) 事件冒泡我们从字面意思理解就是当用户行为触发我们页面的定 ...

  6. JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html   ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->   ...

  7. js 事件冒泡和事件捕获

    事件流:指的是网页中元素接受事件的顺序,它是一个概念,而不是具体的实际的东西 事件冒泡:指的是内层元素的事件,会触发包含着此元素的外层元素的事件,触发的顺序是:由内而外的 例如: <!DOCTY ...

  8. js高级:event,事件冒泡,事件捕获

    1.事件 浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发. 通过 obj.事件名=function(){} 事件名:onmouseover 鼠标悬 ...

  9. JS高级:事件冒泡和事件捕获;

    1.事件:浏览器客户端上客户触发的行为成为时事件:所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发 当用户触发一个事件时,浏览器的所有详细信息都存在一个叫做event的对象上,我们把它叫做 ...

随机推荐

  1. for..of与for..in

    var arr=[1,2,3,5] undefined for(var m of arr) console.log(m)//1,2,3,5 for(var m in arr) console.log( ...

  2. ArrayList 源码分析

    ArrayList 源码分析 1. 结构   首先我们需要对 ArrayList 有一个大致的了解就从结构来看看吧. 1. 继承   该类继承自 AbstractList 这个比较好说 2. 实现 这 ...

  3. 【Linux】 环境变量与shell配置&执行

    ■ 变量与环境变量 shell环境通常存在很多变量,变量可以通过echo $VAR或${VAR}的方式查看.set命令可以查看当前环境中的所有变量(包括一般的自定义变量和环境变量) 变量的设置通过简单 ...

  4. c++ --> 变量、常量与运算符

    变量.常量与运算符   一.什么是变量?    在计算机的内存中, 内存被划分为一个一个的内存单元, 每个内存单元有自己的编号, 而变量就是对某一段连续内存单元使用一些更容易记忆.更容易区分的字符组合 ...

  5. hibernate的一级和二级缓存

    一级缓存就是Session级别的缓存,close后就没了. 二级缓存就是SessionFactory级别的缓存,全局缓存,要配置其他插件. 什么样的数据适合存放到第二级缓存中? 1.很少被修改的数据 ...

  6. linux设置代理修改接口数据

    其实很简单,希望看到的人可以一次搞定,所以我把所有步骤写一块儿了. 1.首先在自己能上网的机器上安装fiddler,程序自己百度搜就可以,百度软件中心的程序就行. 2.安装fiddler后,管理员权限 ...

  7. SSH三大框架整合案例

    SSH三大框架的整合   SSH三个框架的知识点 一.Hibernate框架 1. Hibernate的核心配置文件 1.1 数据库信息.连接池配置 1.2 Hibernate信息 1.3 映射配置 ...

  8. iOS企业版使用第三方实现自动更新版本

    1.获取本地版本和互联网版本          NSDictionary *infoDictionary = [[NSBundle mainBundle] infoDictionary];     N ...

  9. Linux安装java环境教程

    前言: 本教程基于jdk 1.8,但是此教程适用于jdk1.7等版本. 教程正文: 1.1. 登录Oracle官网下载jdk1.8安装包(gz结尾) 这里可以用"wget + 下载地址&qu ...

  10. bug终结者 团队作业第六、七周

    bug终结者 团队作业第六.七周 作业要求:团队作业第六.七周 博客编辑:20162322 朱娅霖 一.修改<需求规格说明书> <需求规格说明书>2.0版(即初稿) <需 ...