深入理解JS DOM事件机制

1、事件流

html 元素触发事件的顺序。

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

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

在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事件机制就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Javascript处理DOM元素事件实现代码

    DOM元素都有一些标准事件,一般使用时只要使用onclick=function的方式就可以了,但是当需要为DOM元素添加多个事件,删除事件,或在用Javascript封装控件的时候,为封装的控件添加自定义事件的时候,onclick=function的方式就不够用了,但是浏览器有addEventListener和attachEvent方法可供调用,从而模拟出类似于C#中的事件委托的事件触发机制! 复制代码 代码如下: /* * 功能:事件处理 * Author:LQB * 时间:2009-1-4

  • javascript事件捕获机制【深入分析IE和DOM中的事件模型】

    本文实例分析了javascript事件捕获机制.分享给大家供大家参考,具体如下: 1.什么是事件冒泡? 在排序算法中,我们学过冒泡排序法,所谓冒泡就是让底层的东西浮出水面,对于事件冒泡也同样是如此, 下面我们来看一个例子来说明什么是事件冒泡. <div> <button>测试</button> </div> <script> $("div").bind("click",function(){alert(&q

  • 一些主流JS框架中DOMReady事件的实现小结

    原来比较常用的是window的onload 事件,而该事件的实际效果是:当页面解析/DOM树建立完成,并完成了诸如图片.脚本.样式表甚至是iframe中所有资源的下载后才触发的.这对于很多 实际的应用而言有点太"迟"了,比较影响用户体验.为了解决这个问题,ff中便增加了一个DOMContentLoaded方法,与onload相比,该 方法触发的时间更早,它是在页面的DOM内容加载完成后即触发,而无需等待其他资源的加载.Webkit引擎从版本525(Webkit nightly 1/20

  • JS中dom0级事件和dom2级事件的区别介绍

    dom0级事件 <a href="#" id="hash" onclick="fn();fn();"> <button type="button">返回上面进行开通</button> </a> var btn=$('#hash').get(); btn.onclick=function(){ alert(''); }; btn.onclick=function(){ alert(

  • 谈谈我对JavaScript DOM事件的理解

    谈谈我对JavaScript DOM事件的理解

    什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键.事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完成,或者是用户滚动窗口或改变窗口大小. 通过使用 JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应. DOM与事件是JavaScript最核

  • JavaScript DOM事件(笔记)

    第1章 事件流 1-1.事件冒泡:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收; 然后逐级向上传播至最不具体的那个节点(文档); 1-2.事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件; 第2章 事件处理程序 2-1 HTML事件处理程序 //缺点:HTML和JS代码紧密的耦合在一起; <input type="button" value="按钮" onclick="showMessage()"&g

  • Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)

    Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)

    本文实例总结了Javascript DOM事件操作.分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

  • Javascript Event事件中IE与标准DOM的比较

    1.事件流的区别 IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件 示例: 复制代码 代码如下: <body> <div> <button>点击这里</button> </div> </body> 冒泡型事件模型: button->div->body (IE事件流) 捕获型事件模型: body->div->button (Netscape事件流) DOM事件模型: body-&g

  • 关于javascript DOM事件模型的两件事

    关于javascript DOM事件模型的两件事

    事件捕捉(Event Capture)的实现问题 W3C DOM Level2的事件模型规范中,事件在DOM树中的传播过程(从根节点到目标节点)被分为了两个阶段:捕捉(Capture)和冒泡(Bubbling).下面这个图能大概的说明整个过程: (from W3C) 如果想创建一个捕捉事件,在支持W3C 事件模型的浏览器中,将addEventListener的第三个参数设为true就好了.例如: 复制代码 代码如下: document.getElementById('foo').addEvent

  • javascript 删除dom对象的事件函数代码

    JS添加/删除事件在IE和支持dom浏览器分别为:attachEvent(ie中的添加事件),detachEvent(ie中的删除事件),addEventListener(支持dom浏览器中的添加事件),removeEventListener(支持dom浏览器中的删除事件). 例如第一次点击黑色区域的时候弹出警告,并移除click事件,也就是第二次再点击的时候就没反应了,整合代码如下: 添加删除事件 var EventUtil=new Object; //oTarget:目标:sEventTyp

  • JavaScript DOM 添加事件

    因为对于支持DOM的浏览器来说,添加事件是用addEventListener()方法来给对象添加事件! 而对于MSIE来说则是用attachEvent()来给对象添加事件!这就使得我们必须用一个容器来装载这两个不同浏览器上对事件的处理方式!这样我们就可以直接调用addEvent()方法来给对象添加事件了! 这不是更方便?!呵呵-- 让我们来看看吧! /** * 注册一个监听事件到元素 * @param {Object} node 所要添加事件的对象 * @param {Object} type

  • 理解javascript中DOM事件

    理解javascript中DOM事件

    首先,此文不讨论繁琐细节,但是考虑到读者的心灵感受,本着以积极向上的心态,在此还是会列举示例说明. ​标题为理解DOM事件,那么在此拿一个简单的点击事件为例,希望大家看到这个例子后能触类旁通. 最初我们给页面实现点击,就像下面这样的简单操作. 先定义一个块如<div id="weiyuzhou">微宇宙</div>,之后在<script type="text/javascript"></script>内部实现id为we

  • JS DOMReady事件的六种实现方法总结

    在实际应用中,我们经常会遇到这样的场景,当页面加载完成后去做一些事情:绑定事件.DOM操作某些结点等. 原来比较常用的是window的onload 事件,而该事件的实际效果是:当页面解析/DOM树建立完成,并完成了诸如图片.脚本.样式表甚至是iframe中所有资源的下载后才触发的. 这对于很多实际的应用而言有点太"迟"了,比较影响用户体验. 为了解决这个问题,ff中便增加了一个DOMContentLoaded方法,与onload相比,该方法触发的时间更早,它是在页面的DOM内容加载完成

随机推荐