详细解读JavaScript的跨浏览器事件处理
一.关于获取事件对象
ff有点倔强,只支持arguments[0],不支持window.event。这次真的不怪ie,虽然把event作为window的属性不合规范,但大家都已经默许这个小问题存在了,只有ff这么多年了还是特立独行。所以,跨浏览器的事件对象获取有以下两种方式:
带参的:
getevent : function(event){ return event ? event : window.event; //return event || window.event;//或者更简单的方式 }
无参的:
function getevent() { return arguments[0] ? arguments[0] : window.event; //return arguments[0] || window.event;//或者更简单的方式 }
需要特别说明一种方式:html的dom0级方式 + 带参的事件处理器,如下:
function handler(event){ //do something } <!-- html的dom0级方式 -->
<button id="btn" onclick="handler(event);">按钮</button>
上面这种方式是全浏览器兼容的,但依赖html的dom0级方式的缺点很明显,所以没能成为像前两种那样的主流方法,而js的dom0级方式 + 带参的事件处理器,如下:
function handler(event){ //do something } btn.onclick = handler;//js的dom0级方式 //btn.onclick = function(event){/*do something*/}//或者匿名函数,效果同上
这种方式不是全浏览器兼容的,[ie8-]不支持,ie9+未知,ff,chrome支持。一直以为html的dom0级事件处理和js的dom0级事件处理是等价的,现在做了很多实验才发现二者是有区别的
二.关于获取事件源
event.srcelement是[ie8-]唯一的方式,ie9+未知,其它浏览器都支持标准的event.target方式
三.关于阻止事件默认行为
event.preventdefault()是标准方法,但[ie8-]不支持,ie自己的方式是event.returnvalue = false;
四.关于停止事件传播
event.stoppropagation()是标准方法,ie又有意见了,他要这么玩:event.cancelbubble = true;这里需要特别注意了,因为cancel是属性而不是方法,与标准相差甚远,容易记错
五.关于事件处理器的添加和移除
dom0级方式
ele.onclick = handler;ele.onclick=null;最古老的一种方式
优点:全浏览器兼容
缺点:同一事件只能绑定/解绑一个事件处理器
dom2级方式
ele.add/removeeventlistener(eventtype, handler, catch);
和ie方式:ele.attach/detachevent(‘on'+eventtype, handler);
优点:支持绑定/解绑多个事件处理器
缺点:需要做兼容性判断。需要注意的是:标准方式中最后一个参数表示是否在事件捕获阶段绑定/解绑,ie不支持事件捕获,所以也就没有第三个参数了
注意:ie方式不仅方法名与标准不同,参数中事件类型还要加上on,否则绑定无效但不报错
六.跨浏览器的事件处理
//跨浏览器的事件处理器添加方式 var eventutil = { addhandler : function(elem, type, handler){ if(elem.addeventlistener){ elem.addeventlistener(type, handler, false); } else if(elem.attachevent){ elem.attachevent("on" + type, handler);//添加多个同一类型的handler时,ie方式的规则是最后添加的最先触发 } else{ if(typeof elem["on" + type] === 'function'){ var oldhandler = elem["on" + type]; elem["on" + type] = function(){ oldhandler(); handler(); } } else{ elem["on" + type] = handler;//支持添加多个事件处理器 } } }, getevent : function(event){ return event ? event : window.event; }, gettarget : function(event){ return event.target || event.srcelement; }, preventdefault : function(event){ if(event.preventdefault){ event.preventdefault(); } else{ event.returnvalue = false; } }, removehandler : function(elem, type, handler){ if(elem.removeeventlistener){ elem.removeeventlistener(type, handler, false); } else if(elem.detachevent){ elem.detachevent("on" + type, handler); } else{ elem["on" + type] = null;//不支持移除单一事件处理器,只能全部移除 } }, stoppropagation : function(event){ if(event.stoppropagation){ event.stoppropagation(); } else{ event.cancelbubble = true; } }, getrelatedtarget : function(event){ if(event.relatedtarget){ return event.relatedtarget; } else if(event.toelement && event.type == "mouseout"){ return event.toelement; } else if(event.fromelement && event.type == "mouseover"){ return event.fromelement; } else{ return null; } }, /*ie8点击左键和中键都是0;ff无法识别中键;chrome正常*/ getbutton : function(event){//返回0,1,2 - 左,中,右 if(document.implementation.hasfeature("mouseevents", "2.0")){ return event.button; } else{ switch(event.button){ case 0:case 1:case 3:case 5:case 7: return 0; break; case 2:case 6: return 2; break; case 4: return 1; break; default: break; } } }, /*只能检测keypress事件,返回值等于将要显示的字符编码*/ /*ie和chrome只有能显示的字符键才触发,ff其它键也能触发,返回值为0*/ getcharcode : function(event){ if(typeof event.charcode == "number"){ return event.charcode; } else{ return event.keycode; } } };
综合示例
如果项目中没有使用诸如 jquery 之类的库,如何方便地为元素绑定事件,并兼容各种浏览器呢?下面这个简单的 utility 应该可以考虑。
var eventutility = { addevent : function(el, type, fn) { if(typeof addeventlistener !== "undefined") { el.addeventlistener(type, fn, false); } else if(typeof attachevent !== "undefined") { el.attachevent("on" + type, fn); } else { el["on" + type] = fn; } }, removeevent : function(el, type, fn) { if(typeof removeeventlistener !== "undefined") { el.removeeventlistener(type, fn, false); } else if(typeof detachevent !== "undefined") { el.detachevent("on" + type, fn); } else { el["on" + type] = null; } }, gettarget : function(event) { if(typeof event.target !== "undefined") { return event.target; } else { return event.srcelement; } }, preventdefault : function(event) { if(typeof event.preventdefault !== "undefined") { event.preventdefault(); } else { event.returnvalue = false; } } };
使用方法示例:
var eventhandler = function(evt) { var target = eventutility.gettarget(evt), tagname = target.tagname; if(evt.type === "click") { if(tagname === "a" || tagname === "button") { alert("you clicked on an a element, and the innerhtml is " + target.innerhtml + "!"); eventutility.preventdefault(evt); } } else if(evt.type === "mouseover" && tagname === "a") { alert("mouseovered " + target.innerhtml); } }; eventutility.addevent(document, "click", eventhandler); eventutility.addevent(document, "mouseover", eventhandler); eventutility.removeevent(document, "mouseover", eventhandler);
推荐阅读
-
详细解读JavaScript的跨浏览器事件处理
-
JavaScript中的跨浏览器事件操作的基本方法整理
-
EventUtil对象 之 跨浏览器的事件处理程序
-
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异_javascript技巧
-
捕获浏览器关闭、刷新事件不同情况下的处理方法_javascript技巧
-
跨浏览器的事件对象介绍_javascript技巧
-
最详细的JavaScript和事件解读
-
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)_javascript技巧
-
详解javascript跨浏览器事件处理程序_javascript技巧
-
详细解读JavaScript的跨浏览器事件处理