深入理解JS DOM事件机制


Posted in Javascript onAugust 06, 2016

1、事件流

html 元素触发事件的顺序。

2、事件冒泡IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。3、事件捕获事件捕获的思想是不太具体的节点应该更早的接收到事件,而最具体的节点应该在最后接收到节点。事件捕获的用意在于事件到达预定目标之前捕获它。

DOM事件流
“DOM2级事件流”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和冒泡阶段。首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段,可以在这个阶段对事件作出响应。以简单的HTML页面为例,单击<div>元素会按照下图顺序触发事件。

深入理解JS DOM事件机制

在DOM事件流中,实际的目标(<div>元素)在捕获阶段不会接收到事件。这意味着在捕获阶段,事件从document到<html>再到<body>后就停止了。下一个阶段是“处于目标”阶段,于是事件在<div>上发生,并在事件处理中被看成冒泡阶段的一部分。然后冒泡阶段发生,事件又传播回文档。
多数支持DOM事件流的浏览器都实现了一种特定行为;即使“DOM2级事件”规范明确要求捕获阶段不会涉及事件的目标,但Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果,就是有两个机会在目标对象上面操作事件。

阻止事件冒泡

实验

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript">
		function onBtn() {
			alert('button');
			//cancelBubble(); 阻止事件冒泡
		}
		//获取事件对象
		function getEvent(){
			//如果为ie或chrome
			if(window.event){return window.event;}

			//针对firefox
			func = getEvent.caller; //获取函数调用者
			while(func != null){
				var arg0 = func.arguments[0]; //获取调用者第一个参数
				//判断参数是否为空
				if(arg0){
					//判断arg0是否为事件对象
				  if((arg0.constructor == Event || arg0.constructor == MouseEvent
				    || arg0.constructor == KeyboardEvent)
				    ||(typeof(arg0) == "object" && arg0.preventDefault
				    && arg0.stopPropagation)){
				     return arg0;
				   }
				}
				//获取func调用者
				func = func.caller;
			}
			return null;
		}
		//阻止事件冒泡
		function cancelBubble() {
			event = getEvent();
			 // Firefox chrome
		  if(event.preventDefault) {  
		   
		    event.preventDefault();  
		    event.stopPropagation(); 

		   } else { 
		   	//ie 
		    event.cancelBubble=true;  
		    event.returnValue = false;
		   }  
		}
	</script>
</head>
<body onclick="alert('body')">
	<div onclick="alert('div');" style="background-color:green">
		<button onclick="onBtn()">dsd</button>
	</div>
</body>
</html>

上面的html代码执行的事件触发顺序。

默认情况: 依次会弹出 'button' ---》 弹出'div' -----》弹出'body'

如果加上cancelBubble()代码:只会弹出'button'

以上这篇深入理解JS DOM事件机制就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 #Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 #Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 #Javascript
JS获取和修改元素样式的实例代码
Aug 06 #Javascript
原生js获取元素样式的简单方法
Aug 06 #Javascript
浅析Node.js实现HTTP文件下载
Aug 05 #Javascript
JS中对Cookie的操作详解
Aug 05 #Javascript
You might like
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
Vue渲染函数详解
2017/09/15 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
vue-router history模式下的微信分享小结
2018/07/05 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
python读写LMDB文件的方法
2018/07/02 Python
python中的常量和变量代码详解
2018/07/25 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
python mock测试的示例
2020/10/19 Python
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
路政管理专业个人自荐信范文
2013/11/30 职场文书
大学四年规划书范文
2013/12/27 职场文书
运动会表扬稿大全
2014/01/16 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
Python PIL按比例裁剪图片
2022/05/11 Python