js中冒泡事件和捕获事件:

冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡。这个事件从原始元素开始一直冒泡到DOM树的最上层

捕获事件:捕获事件是从页面的最上层到被绑定元素都会触发。

IE只支持事件冒泡,不支持事件捕获

冒泡事件和捕获事件的方向是相反的。

形式如下图所示:

一般为浏览器中的元素绑定事件有2种方式:

一、直接在页面元素中进行绑定,此方式采用的是冒泡排序,如:

<div id="eventExample" onclick="alert('直接在元素上绑定事件')"></div>

二、通过js的方式为元素绑定事件,如:

var eventObj = document.getElementById("eventExample");
//IE浏览器中使用的是elem.attachEvent("onclick",function(){});
eventObj.attachEvent("onclick",function(){});
//在其他浏览器中使用elem.addEventListener("click",function(){},boolean是否使用捕获方式)
eventObj.addEventListener("click",function(){},false);

addEventListener(事件类型,触发的函数,是否捕获):如果最后一个参数为true,则表示采用捕获事件;如果最后一个参数是false,则表示采用冒泡事件。

<div id="event_1" onclick="alert('最上层')">
<span id="event_2" onclick="alert('中间层')">
<a id="event_3" href="http://www.baidu.com" onclick="alert('最后一层')" >最后一层</a>
</span>
</div>
<script>
var event_3 = document.getElementById("event_3");
event_3.addEventListener("click",function(){
alert("通过绑定点击了最后一层");
},false);
</script>

在执行上述代码的过程中,如果点击“最后一层”,首先会弹出“最后一层”,然后弹出“通过绑定点击了最后一层”,然后弹出“中间层”,最后是“最上层”,

由这个执行顺序可以看出,冒泡事件是由内之外执行的,且在执行过程中,直接绑定在元素上的事件比通过js绑定的时间执行的优先级高。

说到冒泡事件,就会涉及到组织冒泡:

1.event.stopPropagation();

<div id="event_1" onclick="alert('最上层')">
<span id="event_2" onclick="alert('中间层')">
<a id="event_3" href="http://www.baidu.com" onclick="alert('最后一层')" >最后一层</a>
</span>
</div>
<script>
var event_3 = document.getElementById("event_3");
event_3.addEventListener("click",function(event){
event.stopPropagation();
},false);
</script>

在代码绑定中加入event.stopPropagation();后,执行的结果为:弹出”最后一层“,然后跳转到”百度“。

2.event.preventDefault(); 阻止元素的默认事件的执行

如果将上述代码中的event.stopPropagation();换成event.preventDefault();,执行结果就变成:”最后一层“---->”中间层“----->"最上层",然后就不会跳转到”百度“

3.return false;

/**************************附加知识*********************************/

1、event事件:

function showMsg(event){
event = event || window.event; //IE和Chrome下是window.event FF下是e 
}

2、取消事件默认行为的方法:

function preventDefaultHandler(event){
event = event || window.event;
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;//IE下使用
}
}

3、阻止冒泡事件

function stopPropagationHandler(event){
event = event || window.event;
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;//IE
}
}

4.获取事件源

function eventSrc(event){
event = event || window.event;
var target = event.target || event.srcElement;//IE和Chrome下是srcElement FF下是target
}

5、如果你有一个很多行的大表格,在每个<tr>上绑定点击事件是个非常危险的想法,因为性能是个大问题。流行的做法是使用事件委托。

事件委托描述的是将事件绑定在容器元素上,然后通过判断点击的target子元素的类型来触发相应的事件。 
事件委托依赖于事件冒泡,如果事件冒泡到table之前被禁用的话,那以下代码就无法工作了。

myTable.onclick = function () {
e = e || window.event;
var targetNode = e.target || e.srcElement;
// 测试如果点击的是TR就触发
if (targetNode.nodeName.toLowerCase() === 'tr') {
alert('You clicked a table row!');
}
}

  

  

Js冒泡事件和捕获事件的更多相关文章

  1. js中冒泡事件和捕获事件

    js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...

  2. 前端基本知识(一):W3C标准&&冒泡事件,捕获事件,W3C DOM对象模型,对比分析

    W3C标准是万维网联盟, 其他的可以参考万维网版本的更新内容 一.W3C标准 二.W3C DOM事件 三.冒泡事件 四.捕获事件 一.W3C标准 其实网页是由三分部组成:1.结构(structure) ...

  3. js事件的捕获和冒泡阶段

    讨论的主要是两个事件模型:IE事件模型与DOM事件模型 IE内核浏览器的事件模型是冒泡型事件(没有捕获事件过程),事件句柄的触发顺序是从ChildNode到ParentNode. <div id ...

  4. 简单总结焦点事件、Event事件对象、冒泡事件

    每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...

  5. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  6. JS Event事件流(冒泡机制、捕获机制、事件绑定)

    1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...

  7. js event 冒泡和捕获事件详细介绍【转】

    冒泡和捕获 冒泡: 事件从内向外,从下向上执行 (默认行为) 捕获: 事件从外向内,从上向下执行 vue之capture 捕获事件 capture.html <!DOCTYPE html> ...

  8. JS中绑定事件顺序(事件冒泡与事件捕获区别)

    在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件.直接看下面实例 <!Doctype ...

  9. Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理

    Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...

随机推荐

  1. ubuntu错误解决。

    ubuntu中出现如下错误: W: Failed to fetch http://cn.archive.ubuntu.com/ubuntu/dists/precise-backports/main/i ...

  2. Java Web系列:Spring依赖注入基础

    一.Spring简介 1.Spring简化Java开发 Spring Framework是一个应用框架,框架一般是半成品,我们在框架的基础上可以不用每个项目自己实现架构.基础设施和常用功能性组件,而是 ...

  3. 2014 牡丹江现场赛 i题 (zoj 3827 Information Entropy)

    I - Information Entropy Time Limit:2000MS     Memory Limit:65536KB     64bit IO Format:%lld & %l ...

  4. 一个可视化的retrospective网站

    IdeaBoardz - Brainstorm, Retrospect, Collaborate是一个可视化的retrospective,brainstorm的网站,比较简单易用,可以导出pdf和ex ...

  5. 【设计模式 - 20】之状态模式(State)

    1      模式简介 状态模式的定义: 状态模式允许对象在内部状态改变时改变它的行为,对象看起来好像修改了它的类.这个模式将状态封装成独立的类,并将动作委托到代表当前状态的类的对象. 状态模式的优点 ...

  6. jersey 过滤器

    这里使用的Jersey 是 1.1 版本 1.  web.xml 配置 <?xml version="1.0" encoding="UTF-8"?> ...

  7. windows下 tomcat7 配置成服务

    最简单方法:下载windows安装版,下一步下一步搞定! 非安装版: 1.下载tomcat7 windows版 2.首先找到F:\apache\bin\service.bat(不同的计算机Tomcat ...

  8. iOS-iPad开发之popoverController使用介绍

    iOS-iPad开发之popoverController使用介绍 iOS开发UI篇-popoverController使用注意 iOS SDK:自定义Popover(弹出窗口) 实现的简单例子: // ...

  9. [转] Webpack 入门指迷

    大概算是一份教程吧, 只不过效果肯定不如视频演示之类的好.. Webpack 最近在英文社区上经常看到, 留了心, 但进一步了解是通过下边的视频:视频: How Instagram.com Works ...

  10. Struts2 OGNL调用公共静态方法

    在实现一个功能的时候用到了Struts2的OGNL 调用后台的静态方法,弄了半天没有出来结果,原来是自己没有在Struts的配置文件里面申明可以在前台使用后台的静态方法 <constant na ...