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. socket programming Max size of tcp/ip socket Buffer?

    TCP data is buffered at both sender and receiver. The size of the receiver's socket receive buffer d ...

  2. SQL语法集锦一:SQL语句实现表的横向聚合

    本文转载:http://www.cnblogs.com/lxblog/archive/2012/09/29/2708128.html 问题描述:假如有一表结构和数据如下: C1 C2 C3 C4 C5 ...

  3. delphi TSaveDialog

    TSaveDialog 预览          实现过程 动态创建和使用保存文件对话框 procedure TForm1.Button1Click(Sender: TObject);begin  wi ...

  4. 深入N皇后问题的两个最高效算法的详解 分类: C/C++ 2014-11-08 17:22 117人阅读 评论(0) 收藏

    N皇后问题是一个经典的问题,在一个N*N的棋盘上放置N个皇后,每行一个并使其不能互相攻击(同一行.同一列.同一斜线上的皇后都会自动攻击). 一. 求解N皇后问题是算法中回溯法应用的一个经典案例 回溯算 ...

  5. 粗谈pcap_next_ex()

      pcap_next_ex(pcap_t* p,struct pcap_pkthdr** pkt_header,const u_char** pkt_data) 功能: 从interface或离线记 ...

  6. Windows 8和CentOS 6.4(64)双系统硬盘安装教程

    最近在笔记本上升级原来的系统Win7到Win8,同时又安装了CentOS 6.4(64)系统,实现双系统共存.着实折腾了一番,主要是CentOS6.4(64)的两个iso文件加起来5G多(其实只用第一 ...

  7. css考核点整理(十)-响应式开发经验,响应式页面的三种核心技术是什么

    响应式开发经验,响应式页面的三种核心技术是什么

  8. SQL查询显示行号、随机查询、取指定行数据

    转自:walkingp 1.显示行号 如果数据没有删除的情况下主键与行号是一致的,但在删除某些数据,行号就与主键不一致了,这时需要查询行号就需要用新的方法,在SQL Server2005之前,需要使用 ...

  9. LayoutInflater类详解

    http://www.cnblogs.com/top5/archive/2012/05/04/2482328.html   在实际开发中LayoutInflater这个类还是非常有用的,它的作用类似于 ...

  10. (转载)Javascript 进阶 作用域 作用域链

    载请标明出处:http://blog.csdn.net/lmj623565791/article/details/25076713 一直觉得Js很强大,由于长期不写js代码,最近刚好温故温故. 1.J ...