深入理解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 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
基于vue 实现token验证的实例代码
Dec 14 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 Javascript
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 print EOF实现方法
2009/05/21 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
Python3 翻转二叉树的实现
2019/09/30 Python
linux 下selenium chrome使用详解
2020/04/02 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
网络技术支持面试题
2013/04/22 面试题
C#可否对内存进行直接的操作
2015/02/26 面试题
职业培训师职业生涯规划
2014/02/18 职场文书
企业节能减排实施方案
2014/03/19 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
1亿有多大教学反思
2014/05/01 职场文书
2015年路政工作总结
2015/05/22 职场文书
民间借贷借条如何写
2015/05/26 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle