深入理解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 相关文章推荐
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
PHP4实际应用经验篇(7)
2006/10/09 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
2012/02/16 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
python实现对一个完整url进行分割的方法
2015/04/29 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
python实现函数极小值
2019/07/10 Python
python编写计算器功能
2019/10/25 Python
Python如何把多个PDF文件合并代码实例
2020/02/13 Python
简单了解Python write writelines区别
2020/02/27 Python
python 数据类型强制转换的总结
2021/01/25 Python
浅谈基于Canvas的手绘风格图形库Rough.js
2018/03/19 HTML / CSS
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
2015年清明节扫墓演讲稿
2015/03/18 职场文书
感恩老师主题班会
2015/08/12 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
Spring 使用注解开发
2022/05/20 Java/Android