事件模型在各浏览器中存在差异_javascript技巧

标准参考

根据 W3C DOM 2 Events 描述，EventTarget 接口被所有支持 DOM 事件模型的节点（Node）实现。 该接口提供了 'addEventListener' 和 'removeEventListener' 方法，用来绑定或解绑一个 EventListeners 接口到一个 EventTarget。

DOM 2 Events 中定义了 Event 接口，用来提供事件的上下文信息，它提供了若干标准属性和方法。 实现 Event 接口的对象一般作为第一个参数传入事件处理函数，以用来提供当前事件相关的一些信息。

DOM 2 事件模型允许 DOM 实现支持事件的多模块，如果有必要，事件模型允许附加新的事件模块。 为了共同使用性的目的，DOM 会定义一个包含低级别的，依赖设备的事件模块、一个 UI 逻辑事件模块和一个文档变化事件模块的 UI 事件模块。 第三方实现（比如浏览器厂商）在定义一个新类型事件的时候，事件名称一定不能使用大小写无关的 'DOM' 字符串作开头，该前缀是为未来的 DOM 事件模块保留的。

DOM 2 已经定义了一个 UI 事件类型模块和一个鼠标事件类型的模块，它们分别对应 UIEvent 和 MouseEvent 接口。 这两个接口提供了若干标准属性和方法，以获知事件发生时的一些信息。

关于 EventTarget 接口的详细信息，请参考 DOM 2 Events 1.3. Event listener registration。

关于 Event 接口的详细信息，请参考 DOM 2 Events 1.4. Event interface。

关于事件模块的详细信息，请参考 DOM 2 Events 1.6. Event module definitions。

问题描述

各浏览器对元素绑定、解绑事件监听器的方法，事件对象的获取，以及 Event 对象的实现上存在差异。

造成的影响

如果使用某浏览器特有的事件相关的属性及方法编写代码，则可能造成兼容性问题，导致代码报错，功能失效。

受影响的浏览器

所有浏览器  

问题分析

1. 只有 IE Opera 支持使用 'attachEvent' 和 'detachEvent' 方法绑定和解绑事件监听器

根据 DOM 2 Events 中描述，节点使用 'addEventListener' 和 'removeEventListener' 方法绑定和解绑事件监听器，但 IE6 IE7 IE8 不支持这两个方法， 而使用 'attachEvent' 和 'detachEvent' 方法作为替代方案，Opera 两类方法都支持。Chrome Safari Firefox 只支持标准方法。

分析以下代码：

<button id="add" type="button">add event listener test</button>
<button id="remove" type="button">remove event listener test</button>
<div id="info"></div>
<script type="text/javascript">
	var add = document.getElementById("add"),
		remove = document.getElementById("remove"),
		showMsgA = function(){showMsg("attachEvent")},
		showMsgB = function(){showMsg("addEventListener")};

	if(add.attachEvent){
		add.attachEvent("onclick",showMsgA);
		remove.attachEvent("onclick",removeE);
	}

	if(add.addEventListener){
		add.addEventListener("click",showMsgB,false);
		remove.addEventListener("click",removeE,false);
	}

	function removeE(){
		if(add.detachEvent){
			add.detachEvent("onclick",showMsgA);
			showMsg("detachEvent");
		}

		if(add.removeEventListener){
			add.removeEventListener("click",showMsgB,false);
			showMsg("removeEventListener");
		}
	}

	function showMsg(method){
		document.getElementById("info").innerHTML += ("support " + method + "<br />");
	}
</script>

依次点击 'add event listener test' >> 'remove event listener test' >> 'add event listener test'，测试各浏览器对这些方法的支持，结果如下：

IE6 IE7 IE8
Opera
Chrome Safari Firefox

关于 'addEventListener' 和 'attachEvent' 有几点需要注意：

  • IE 不支持在捕获阶段触发事件监听器，'attachEvent' 方法没有提供参数说明是否响应在捕获阶段触发的事件；
  • 'addEventListener' 和 'attachEvent' 都可以注册多个事件监听器；
  • 在 Firefox Chrome Safari Opera 中给同一事件注册同一个事件监听器多次，重复注册的会被丢弃；而在 IE 中重复注册的事件监听器会被重复执行多次；
  • 当给同一元素注册了多个事件监听器的时候，IE6 IE7 的事件监听器执行顺序是随机的，IE8 是倒序的，Firefox Chrome Safari Opera 是顺序的；
  • 当元素注册的事件监听器中有非法的事件监听器时（非函数），在 IE Firefox 中会抛出异常，而在 Chrome Safari Opera 中则会忽略非法的事件监听器，继续执行其他的事件监听器。

2. 各浏览器获取事件对象的差异

DOM 2 Events 中规定使用事件监听器的第一个参数作为事件对象，而 IE Opera Chrome Safari 还支持通过 window.event 获取事件对象。

分析以下代码：

<button type="button" id="attach">attachEvent</button>
<button type="button" id="addE">addEventListener</button>
<button type="button" id="byclick">onClick</button>
<br />
INFO :
<div id="info"></div>

<script type="text/javascript">
	function $(id){return document.getElementById(id);}
	var attach = $("attach"),
		addE = $("addE"),
		byClick = $("byclick");

	attach.attachEvent && attach.attachEvent("onclick", handler);
	addE.addEventListener && addE.addEventListener("click", handler, false);
	byClick.onclick = handler;

	function handler(){
		var src = window === this ? window.event.srcElement : this, type = src.innerHTML;
		window.event && showMsg(window.event.type, type + " + window.event");
		arguments[0] && showMsg(arguments[0].type, type + " + arguments[0]");
	}
	function showMsg(type, msg){
		$("info").innerHTML += (msg + "(type : " + type + ")<br />");
	}
</script>

以上代码组合不同的事件监听器绑定方式和事件对象获取方法，测试各浏览器的支持程度。

依次点击 'attachEvent' >> 'addEventListener' >> 'onClick'，结果如下：

IE6 IE7 IE8
Chrome Safari
Opera
Firefox

汇总测试结果如下表：1

事件对象获取方式 IE6 IE7 IE8 Chrome Safari Opera Firefox
window.event Y Y Y N
arguments[0] Y2 Y Y Y

注1： Y 表示支持该事件对象获取方式，N 表示不支持。

注2： 部分支持。

从上表出可以看出：

  • 只有在使用 attachEvent 方法注册事件监听器的时候，IE 才支持使用事件监听器传入的第一个参数作为事件对象的方式；
  • Chrome Safari Opera 两种获取事件对象的方式都支持；
  • Firefox 只支持获取事件对象的标准方式。

3. 各浏览器中事件对象的属性和方法的差异

IE 对事件对象的标准属性和方法支持有限，针对大部分属性和方法，IE 都提供了一套替代非标准的替代方案； 而 Firefox Chrome Safari Opera 除了全面支持事件对象的标准属性和方法外，还在不同程度上支持了 IE 提供的非标准替代方案。

以下代码检测了 Event、UIEvent、MouseEvent 接口以及事件对象的非标准属性在各浏览器下的支持程度：

<button type="button" id="iEvent">Interface Event</button>
<button type="button" id="iUIMouse">Interface UIEvent & MouseEvent</button>
<input type="text" id="nosK" />
<p id="wrap" style="border:3px solid;padding:5px;width:500px;"><a id="nosCM" href="#"><img src="google.gif" alt="IE"/></a></p>
<br />
<table border="1">
	<tbody>
		<tr>
			<th>Interface Event</th>
			<td id="einfo"></td>
		</tr>
		<tr>
			<th>Interface UIEvent<br/>&<br/>MouseEvent</th>
			<td id="minfo"></td>
		</tr>
		<tr>
			<th>Non-standard<br/>&<br/>click</th>
			<td id="ncinfo"></td>
		</tr>
		<tr>
			<th>Non-standard<br/>&<br/>mouseover mouseout</th>
			<td id="nminfo"></td>
		</tr>
		<tr>
			<th>Non-standard<br/>&<br/>keyCode</th>
			<td id="nkinfo"></td>
		</tr>
	</tbody>
</table>

<script type="text/javascript">
	function $(id){return document.getElementById(id);}
	function addEvent(elem, type, handler, useCapture){
		elem.addEventListener ? elem.addEventListener(type, handler, useCapture) :
			elem.attachEvent("on" + type, handler);
	}

	addEvent($("iEvent"), "click", handleEvent, false);
	addEvent($("iUIMouse"), "click", handleUIMouse, false);

	addEvent($("nosCM"), "click", handleNoSClick, false);
	addEvent($("wrap"), "click", function(){alert("P tag.");}, false);

	addEvent($("nosCM"), "mouseover", handldNoSMouse, false);
	addEvent($("nosCM"), "mouseout", handldNoSMouse, false);

	addEvent($("nosK"), "keydown", handleNoSKey, false);
	addEvent($("nosK"), "keypress", handleNoSKey, false);
	addEvent($("nosK"), "keyup", handleNoSKey, false);

	function handleEvent(e){
		e = e || window.event;
		var props = {
			type : "type",
			target : "target",
			currentTarget : "currentTarget",
			eventPhase : "eventPhase",
			bubbles : "bubbles",
			cancelable : "cancelable",
			timeStamp : "timeStamp",
			initEvent : "initEvent",
			preventDefault : "preventDefault",
			stopPropagation : "stopPropagation"
		};

		showMsg(props, e, $("einfo"));
	}

	function handleUIMouse(e){
		e = e || window.event;
		var props = {
			view : "view",
			detail : "detail",
			initUIEvent : "initUIEvent",
			screenX: "screenX",
			screenY : "screenY",
			clientX : "clientX",
			clientY : "clientY",
			ctrlKey : "ctrlKey",
			shiftKey : "shiftKey",
			altKey : "altKey",
			metaKey : "metaKey",
			button : "button",
			relatedTarget : "relatedTarget",
			initMouseEvent : "initMouseEvent"
		}
		showMsg(props, e, $("minfo"));
	}

	function handleNoSClick(e){
		e = e || window.event;
		e.returnValue = false;
		e.cancelBubble = true;

		var props = {
			cancelBubble : "cancelBubble",
			offsetX : "offsetX",
			offsetY : "offsetY",
			returnValue : "returnValue",
			srcElement : "srcElement",
			x : "x",
			y : "y"
		};

		showMsg(props, e, $("ncinfo"));
	}

	function handldNoSMouse(e){
		e = e || window.event;
		var props = {
			fromElement : "fromElement",
			toElement : "toElement"
		};
		showMsg(props, e, $("nminfo"));
	}

	function handleNoSKey(e){
		e = e || window.event;
		$("nkinfo").innerHTML += "<strong>" + e.type + "</strong> : " + e.keyCode + "<br/>";
	}

	function showMsg(props, e, info){
		var tmp = "", p, val;
		with(e){
			for(p in props) {
				try{
					val = eval(props[p]) + " [" + typeof eval(props[p]) + "]";
				} catch (e) {
					val = undefined;
				}
				tmp += "<strong>" + p + "</strong> : " + val + "<br />"
			}
		}
		info.innerHTML = tmp;
	}
</script>

执行以上测试代码，分别点击 'Interface Event' 按钮、'Interface UIEvent & MouseEvent' 按钮和图片，鼠标移到图片上再移开，在文本框中输入 'a'，得到结果整理如下表：3

Interface & Non-standard Property & method IE6 IE7 IE8 Chrome Safari Opera Firefox
Interface Event type Y Y Y
target N Y Y
currentTarget N Y Y
eventPhase N Y Y
bubbles N Y Y
cancelable N Y Y
timeStamp N Y Y
initEvent N Y Y
preventDefault N Y Y
stopPropagation N Y Y
Interface UIEvent view N Y Y
detail N Y Y
initUIEvent N Y Y
Interface MouseEvent screenX Y Y Y
screenY Y Y Y
clientX Y Y Y
clientY Y Y Y
ctrlKey Y Y Y
shiftKey Y Y Y
altKey Y Y Y
metaKey N Y Y
button Y Y Y
relatedTarget N Y Y
initMouseEvent N Y Y
Non-standard cancelBubble Y Y Y
offsetX Y Y N
offsetY Y Y N
returnValue Y Y N
srcElement Y Y N
x Y Y N
y Y Y N
fromElement Y Y N
toElement Y Y N
keyCode Y Y Y

注3： Y 代表事件对象支持该属性或方法，N 代表不支持。

从上表中可以看出：

  • IE 支持事件对象的所有非标准属性，不支持除 'type' 外 Event 接口的所有方法属性及方法，不支持 UIEvent 接口的所有属性和方法，不支持 MouseEvent 接口的 'metaKey'、'relatedTarget' 属性和 'initMouseEvent' 方法；
  • Chrome Safari Opera 支持事件对象的所有标准及非标准的属性和方法；
  • Firefox 支持事件对象的所有标准属性和方法，但仅支持非标准属性中的 'cancelBubble' 和 'keyCode'。

需要注意的是：

  • Firefox 不支持事件对象的 'returnValue' 属性，测试样例中虽然显示 'returnValue' 值为 false，但这仅仅是因为给事件对象添加了 'returnValue' 属性，并没有起到取消事件默认动作的作用，这从地址栏可以看出，多了 '#' 号，这是 A 标签的 'href' 属性造成的。
  • 各浏览器对 Event 接口的 'timeStamp' 属性返回值都不同。

关于 IE 实现的事件对象非标准的属性及方法的详细信息，请参考 MSDN event Object。

关于 Firefox 对事件对象实现的详细信息，请参考 MDC event。

解决方案

1. 使用特性判断创建无兼容性问题的事件监听器绑定和解绑函数

如：

function addEvent(elem, type, handler, useCapture){
	elem.addEventListener ? elem.addEventListener(type, handler, useCapture) :
		elem.attachEvent("on" + type, handler);
}

function removeEvent(elem, type, handler, useCapture){
	elem.removeEventListener ? elem.removeEventListener(type, handler, useCapture) :
		elem.detachEvent("on" + type, handler);
}

2. 使用特性判断获得有效的事件对象

在事件监听器中判断传入的第一个参数或 window.event 是否有效，如：

function handler(e){
	e = e || window.event;
}

3. 使用特性判断使用与标准对应的非标准方法及属性

尽管 IE 对事件对象的标准属性和方法支持有限，但它自己实现的事件模型也基本能够替代或实现标准属性或方法的功能。

下表总结了部分与标准事件对象对应的，或可以实现标准属性或方法功能的非标准属性：

Standard Non-standard
target srcElement
preventDefault() returnValue
stopPropagation() cancelBubble
relatedTarget fromElement toElement

另，标准的 'clientX' 属性和非标准的 'x' 属性作用是相同的，同样 'clientY' 和 'y' 也是。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索事件模型
uc浏览器javascript、浏览器启用javascript、谷歌浏览器javascript、浏览器禁用javascript、浏览器javascript，以便于您获取更多的相关知识。

时间： 2024-03-04 14:03:02

事件模型在各浏览器中存在差异_javascript技巧的相关文章

元素的内联事件处理函数的特殊作用域在各浏览器中存在差异_javascript技巧

标准参考 无. 问题描述 在一个元素的属性中绑定事件,实际上就创建了一个内联事件处理函数(如<h1 onclick="alert(this);"...>...</h1>),内联事件处理函数有其特殊的作用域链,并且各浏览器的实现细节也有差异. 造成的影响 如果在元素的内联事件处理函数中使用的变量或调用的方法不当,将导致脚本运行出错. 受影响的浏览器 所有浏览器 问题分析 1. 内联事件处理函数的作用域链 与其他函数不同,内联事件处理函数的作用域链从头部开始依次是:

setTimeout与setInterval在不同浏览器下的差异_javascript技巧

.(新手可能认为setTimeout与setInterval是javascript函数,这是错误的.新手容易将javascript对象函数与DOM对象方法混淆.) 先来一段代码,大家猜猜在各种浏览器下的结果会是怎么样的呢? 复制代码 代码如下: function f(){ var s = 'arguments.length:'+arguments.length+'; '; for(var i=0,n=arguments.length;i< n;i++){ s += ' ['+i+']:'+arg

javascript判断是否按回车键并解决浏览器之间的差异_javascript技巧

复制代码 代码如下: <li class="item pin"> <span class="overlabel" style="display: block;">请输入验证码</span> <input type="text" class="txt" id="checkNum" name="checkNum" maxlengt

js中事件的处理与浏览器对象示例介绍_javascript技巧

复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>简单的事件处理</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta ht

javascript中Date()函数在各浏览器中的显示效果_javascript技巧

1.JavaScript没有基本的日期数据类型,所以只能显式的创建Date对象.例如:var myDate=new Date(); 2.为了创建一个存储了特定日期的,或者时间的Date对象,可以简单的把日期或者日期与时间放到括号里面: var myDate=new Date("2015/06/16 10:30"); alert(myDate); 火狐浏览器显示的效果为: IE浏览器显示效果: 谷歌浏览器显示效果为: 注意:如果上面的代码这样写;在火狐和IE浏览器里面报错: var my

javascript的解析执行顺序在各个浏览器中的不同_javascript技巧

简介 javascript是一种解释型语言,它的执行是自上而下的.但是各浏览器对于[自上而下]的理解是有细微差别的,而代码的上下游也就是程序流对于程序正确运行又是至关重要的.所以我们有必要深入理解js的执行顺序.为此,我设计了如下八个实验来获得最确切的结果. 实验 复制代码 代码如下: <script type="text/javascript"> //实验一: function t(a) { alert("[t(a)]a:" + a); } funct

整理的比较全的event对像在ie与firefox浏览器中的区别_javascript技巧

window.event IE:有window.event对象 FF:没有window.event对象.可以通过给函数的参数传递event对象.如onmousemove=doMouseMove(event) 鼠标当前坐标 IE:event.x和event.y. FF:event.pageX和event.pageY. 通用:两者都有event.clientX和event.clientY属性. 鼠标当前坐标(加上滚动条滚过的距离) IE:event.offsetX和event.offsetY. FF

Div+CSS布局的宽度计算及在各浏览器中的差异比较

对比于传统的表格布局和框架布局,DIV+CSS布局有着布局容易.改版方便.样式定义灵活.HTML代码简洁清晰.易于JavaScript操控等优点.在众口皆碑的同时,对于一些初学者,总会遇到各种各样的问题,比如说DIV的宽度或高度的计算问题. 我们来探讨一下影响DIV宽度或高度的属性有哪些? DIV的宽度 = width + padding + border + margin 仅从一条公式上看,可能有点难理解,我们通过测试代码和截图来观察一下.为了测试结果观察直观,我们只测试一边,即左边,即本来p

javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异_javascript技巧

在您开始本文的阅读前,我强烈建议您可以先读一读此篇:http://w3help.org/zh-cn/causes/SD9004.            HTMLCollection 接口定义   interface HTMLCollection{      readonly attribute unsigned long   length;      Node               item(in unsigned long index);      Node