深入理解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 相关文章推荐
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
eval的两组性能测试数据
Aug 17 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
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 split汉字
2009/06/05 PHP
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
react-router实现按需加载
2017/05/09 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
python实现FTP服务器服务的方法
2017/04/11 Python
python实现杨辉三角思路
2017/07/14 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
python语音识别实践之百度语音API
2018/08/30 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
Django 用户认证组件使用详解
2019/07/23 Python
党员个人思想汇报
2013/12/28 职场文书
服务员岗位职责
2014/01/29 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
2014年派出所工作总结
2014/11/21 职场文书
入党介绍人意见2015
2015/06/01 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
详解python网络进程
2021/06/15 Python