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. js事件、Js中的for循环和事件的关系、this

    一.js事件  1.事件 用户在网页中所触发的行为 鼠标滑动种类很多,键盘.表单特列: 点击:onclick 鼠标进入:onmouseenter 鼠标离开:onmouseleave 鼠标悬浮:onmo ...

  3. js中冒泡事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js中容易被忽视的事件问题总结

    一:跨平台事件 什么叫跨平台事件?即在不同的浏览器上执行同一事件,所使用的方法不同. 什么是EventUtil对象?有什么作用?即将所有与事件相关的函数,融合在一起的一个容器,方便管理事件对象,它没有 ...

  5. JS中的DOM操作和事件

    [DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...

  6. js阻止冒泡及jquery阻止事件冒泡示例介绍

    js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window ...

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

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

  8. Js中的onblur和onfocus事件

    html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作.本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用. 一. ...

  9. js中一次性注册多个事件

    在js中,如果想一次性给一个控件或者标签初测多个事件的方法: 假如有个<input>标签: <input id=”inputValue” value=”www.baidu.com”/ ...

随机推荐

  1. 解决ScrollView里如果有动态更新的ChildView时会自动滚动到底部的方法

    在这个ChildView的xml属性里加上 android:focusable="true" android:focusableInTouchMode="true&quo ...

  2. (转)RabbitMQ消息队列(五):Routing 消息路由

    上篇文章中,我们构建了一个简单的日志系统.接下来,我们将丰富它:能够使用不同的severity来监听不同等级的log.比如我们希望只有error的log才保存到磁盘上. 1. Bindings绑定 上 ...

  3. BufferedInputStream,FileInputStream,FileChannel实现文件拷贝

    从上篇文章中知道BufferedInputStream是自带缓冲区的输入流,可以大大减少IO次数,提供效率.下面的例子中实现了用BufferedInputStream与FileInputStream实 ...

  4. php中socket的使用 方法简介

    一.开启socket phpinfo();查看是否开启了socket扩展,否则在php.ini中开启. 二.服务器端代码的写法 <?php error_reporting(E_ALL); set ...

  5. ASP.NET Core 处理 404 Not Found

    问题 在没有修改任何配置的情况下,这是用户使用 Chrome 访问不存在的URL时会看到的内容: 幸运的是,处理错误状态代码非常简单,我们将在下面介绍三种技术. 解决方案 在以前的ASP.NET MV ...

  6. Openstack: aborted: Block Device Mapping is Invalid

    Issue: When you create an instance, you may encounter following exception: aborted: Block Device Map ...

  7. Spring Cloud 入门教程 - Eureka服务注册与发现

    简介 在微服务中,服务注册与发现对管理各个微服务子系统起着关键作用.随着系统水平扩展的越来越多,系统拆分为微服务的数量也会相应增加,那么管理和获取这些微服务的URL就会变得十分棘手,如果我们每新加一个 ...

  8. CentOS 7 使用SVN+Apache搭建版本控制服务器

    svn简介 Subversion是一个免费/开源的版本控制系统, Subversion 可以跨越时间地对文件和目录, 以及它们的修改进行管理. 这就允许你恢复 数据的旧版本, 或检查数据的修改历史. ...

  9. VS2017 对com组件调用返回错误hresult e_fail

    解决步骤如下: 第一步: 第二步:进入VS2017 安装目录,如下(路径仅供参考) 执行:gacutil -i Microsoft.VisualStudio.Shell.Interop.11.0.dl ...

  10. linux nohup

    nohup RAILS_ENV=production bundle exec XXXX & nohup RAILS_ENV=production bundle exec XXXX >/d ...