这篇文章主要介绍了 JavaScript 的跨浏览器事件处理, 以全浏览器兼容为大致目标, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
一. 关于获取事件对象
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 级方式的缺点很明显,所以没能成为像前两种那样的主流方法,而 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);
来源: