JavaScript事件——冒泡、捕获
本节要点:1.干预系统的事件处理机制
(一)DOM事件流
(二)停止事件冒泡
(三)阻止事件的默认行为
1.干预系统的事件处理机制
(一)DOM事件流
DOM模型是一个树形结构,在DOM模型中,HTML元素是有层次的。当一个HTML元素上产生一个事件时,该事件会在DOM树中元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件,这个传播过程就是DOM事件流。
DOM事件标准定义了两种事件流,分别是捕获事件和冒泡事件。
1.冒泡事件流
默认情况下,事件使用冒泡事件流。当事件(例如单击事件)在某一DOM元素上被触发时,事件将沿着该节点的各个父结点冒泡穿过整个DOM节点层次。在冒泡过程中的任何时候都可以终止事件的冒泡。如果不停止事件的传播,事件将一直通过DOM冒泡直至到达文档根。
2.捕获事件流
于冒泡模型相反,在捕获事件流模型中,事件的处理将从DOM层次的根开始,而不是从触发事件的目标元素开始,事件被从目标元素的所有所有祖先元素依次往下传递。在这个过程中,事件会被从文档的根到事件目标元素之间各个继承派生的元素所捕获。
3.DOM标准的事件模型
DOM标准同时支持捕获事件模型和冒泡事件模型,但是,捕获事件模型先发生。两种事件流都会触发DOM中的所有对象,从document对象开始,也在document对象结束。
4.事件传导的3个阶段
(1)事件捕捉(Capturing)阶段:事件将沿着DOM树向下传送,经过目标节点的每一个祖先节点,直至目标节点。例如,用户单击了一个超链接,则该单击事件将从document节点转送到html元素、body元素以及包含该链接的p元素。目标节点就是触发事件的DOM节点。
(2)目标(target)阶段:在此阶段中,事件传导到目标节点。浏览器在查找到已经指定给目标事件的监听器后,就会运行该监听器。
(3)冒泡(Bubbling)阶段:事件将沿着DOM树向上转送,再次逐个访问目标元素的祖先节点直到document节点。该过程中的每一步,浏览器都将检测那些不是捕捉事件监听器的事件监听器并执行它们。(即:与触发事件无关的事件监听器也由于冒泡将被执行)。
(二)停止事件冒泡
当事件(例如单击事件)在某一DOM元素上被触发时,事件将沿着该节点的各个父节点冒泡穿过整个DOM节点层次,直到遇到依附有该事件类型处理器的节点。
<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function doSometing(obj,evt){ alert(obj.id); // 做浏览器兼容 var e = (evt)? evt:window.event; //获取IE或非IE浏览器的事件 if (window.event) { //如果是IE浏览器 e.cancelBubble = true; //IE浏览器,设置该属性为true,取消事件冒泡 }else{ e.stopPropagation(); //非IE浏览器,该方法取消事件的进一步捕获或冒泡。 } } </script> </head> <body> <div id="parent1" onclick="alert(this.id);" style="width: 250px;background-color: #cacaca"> <p>This is parent1 div</p> <div id="child1" onclick="alert(this.id);" style="width: 200px;background-color: orange"> <p>This is child1.Will bubble.</p> </div> </div> <br> <div id="parent2" onclick="alert(this.id);" style="width: 250px;background-color: cyan;"> <p>This is parent2 div</p> <div id="child2" onclick="doSomething(this,event);" style="width: 200px;background-color: #aeaeae"> <p>This is child2.</p> </div> </div> </div> </body> </html> |
如图所示,以上代码定义了4个div,其中2个父div,2个子div。单击每个div都会弹出一个消息框,显示其id。单击child1和child2时,事件会冒泡传导到其父元素parent1和parent2。因此,单击child1会弹出两个消息框。而单击child2时,会调用doSomethig函数,使用cancelBubble属性或stopPropagation()方法来停止事件冒泡。
(三)阻止事件的默认行为
事件的默认行为是指浏览器在事件传递和处理完成后自动执行的与该事件关联的默认动作。例如,单击一个超链接的默认行为是访问其定义的url。
IE和其他浏览器阻止事件的默认行为的方法不同。在IE中,可以通过设置event对象的returnValue属性为false来阻止事件的默认行为;在其他浏览器中,则可以通过设置event对象的preventDefault()方法来实现。
<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> window.onload = function(){ var test = document.getElementById('test'); test.onclick = function(e){ //当单击此超链接时执行这个函数 alert('URL:' + this.href + ',不会跳转'); stopDefault(e); } } function stopDefault(e){ if(e && e.preventDefault){ //判断浏览器是非IE浏览器 e.preventDefault(); //非IE浏览器下使用preventDefault方法 }else{ //IE浏览器下令事件(window.event)的returnValue属性为false; window.event.returnValue = false; } return false; } </script> </head> <body> <a href="http://www.baidu.com" id="test">百度</a> </body> </html> |
可以通过event对象的preventDefault属性来判断浏览器是否支持preventDefault()方法。如果preventDefault属性值为true则表示支持,否则不支持。
JavaScript事件——冒泡、捕获的更多相关文章
- 解析Javascript事件冒泡机制
本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...
- 转:JavaScript事件冒泡简介及应用
(本文转载自别处) JavaScript事件冒泡简介及应用 一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理 ...
- JavaScript事件冒泡和事件委托
JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...
- javascript --- 事件冒泡与事件捕获
事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题.考虑下面这段代码,就不写html->head,body之类的代码了,自行 ...
- JavaScript事件冒泡与捕获
event.preventDefault(); 如果event.cancelable的值为true,可以取消默认事件 event.cancelable; 元素是否可以取消 ...
- JavaScript事件冒泡和捕获
事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件. 事件冒泡是自下而上的去触发事件. 绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获.true,事件捕获:fa ...
- Javascript事件冒泡机制
1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...
- JavaScript事件冒泡简介及应用
一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事 件处理程序或者事件返回true,那么这个 ...
- javascript事件冒泡
1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...
随机推荐
- Android IOS WebRTC 音视频开发总结(七九)-- WebRTC选择H.264的四大理由
本文主要介绍WebRTC选择H.264的理由(我们翻译和整理的,译者:weizhenwei,校验:blacker),最早发表在[编风网] 支持原创,转载必须注明出处,欢迎关注我的微信公众号blacke ...
- vs2013单元测试练习过程
1.打开VS2013 --> 新建一个项目.这里我们默认创建一个控制台项目.取名为UnitTestDemo 2.在解决方案里面新增一个单元测试项目.取名为UnitTestDemoTest 创建完 ...
- redis 主从同步
修改redis.conf配置文件 vi redis.conf 在编辑模式下 输入 /slaveof 来搜索 将slaveof启用 即 将#删除 依次配置所有 slave 并将进程 kill 掉 重启 ...
- SqlServer字段说明查询
SELECT t.[name] AS 表名,c.[name] AS 字段名,cast(ep.[value] )) AS [字段说明] FROM sys.tables AS t INNER JOIN s ...
- Using Redis to store php session
Using Redis to store php session 默认情况下,php将会将session信息存储在文件系统上,在单机情况下没有问题,但是当系统负载增大,或者在对系统可用性要求很高的场景 ...
- zTree入门-最简单的树
最近发现项目中很多地方都是树形菜单,而这些树形菜单都是使用树形插件zTree来制作的,所以就想自学一下zTree,参照官方文档写了一个简单的案例,使用zTree做了 一个最简单的树形结构. 案例:zT ...
- 史航第12次作业&总结
作业1:找出最长的字符串 #include <stdio.h> #include <string.h> int main() { ],strings[][]; ; printf ...
- silverlight调用webservice跨域
下载下面的任何文件放在webservice的根目录下 http://files.cnblogs.com/files/jichunhu/crossdomain.xml http://files.cnbl ...
- Git命令学习摘要
1.git init --初始化git项目 2.git status --查看项目的状态 3.git add filename --添加文件到项目 4.git diff filename --查看工 ...
- Java垃圾回收机制 入门
对于Java虚拟机的了解,我认为是一个Java程序员已经入门的重要标志,而JVM中的垃圾回收机制(Garbage Collection,简称GC)又是JVM中的重点,所以hans在这里用篇文章时间和大 ...