首页 > 试题广场 >

写一个通用的事件侦听器函数

[问答题]
var Event = {
    // 页面加载完成后
    readyEvent : function  (fn) {
      if (fn == null) {
          fn = document;
      }
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
          window.onload = fn ;
      }else{
          window.onload = function  () {
            oldonload();
            fn();
          }
      };
    },
    //添加事件
    addEvent : function(element, type, hander) {
      if (element.addEventListener) {        //非IE
               //事件类型、需要执行的函数、是否捕捉
          element.addEventListener(type, hander, false);
      }else if(element.attachEvent){        //IE
          element.attachEvent('on' + type,function  () {
              hander.call(element);
          })
      }else{
          element['on' +type] = hander;
      };
    },
    //移除事件
    removeEvent : function  (element, type, hander) {
      if (element.removeEventListener) {
          element.removeEventListener(type, handler, false)
      }else if (element.attachEvent) {
          element.attachEvent('on' + type, hander);
      }else{
          element['on' + type] = null;
      };
    },
    //阻止事件
    stopPropagation : function  (event) {
      if (event.stopPropagation) {
          event.stopPropagation();    //W3C标准
      }else{
          event.canceBubble = true;   //IE
      };
    },
    //取消默认事件
    preventDefault : function (event) {
      if (event.preventDefault) {
            event.preventDefault();
      };
    },
    //获取事件目标
    getTarget : function (event) {
      return event.target|event.srcElement;
    },
    //获取event对象的引用,取到事件的所有信息,确保随时能使用event;
    getEvent:function (event) {
      var event = event || window.event;
      if (!event) {
          var c = this.getEvent.caller;
          while(!c){
              event = c.arguments[0];
              if (event && Event == ev.constructor) {
                  break;
              };
              c = c.caller;
          }
      };
      return event;
    }    
}
发表于 2016-07-21 14:22:39 回复(1)
attachEventListener中this指向调用者,而IE中的attachEvent中this指向window,所以需要用call函数改变指向; IE中该对象为window.event(window可省略) 而Firefox中该对象为e; element['on' + type] = function(){} //支持所有浏览器,但是只能监听一个事件;event.scrElement是ie,.target是firefox//https://m.xp.cn/b.php/33447.html
编辑于 2020-03-04 14:53:08 回复(0)
WF.Event = 
{
	addEvent : function(element, type, handler)
	{
		if(element.addEventListener)
		{
			element.addEventListener(type, handler, false);
		}
		else if(element.attachEvent)
		{
			//这里采用比上面更简单的方法来修正this指向问题,参考《Javascript.DOM高级程序设计》
			//并且保证了可移除性
			//若使用简单的匿名函数的话
			//element.attachEvent("on"+type, function(e)
			// {
			// 		handler.call(element, window.event || e);
			// });
			// 则调用detachEvent("on"+type, handler)无法移除该事件
			element[type+handler] = function(e)
			{
				handler.call(element, window.event);
			};
			element.attachEvent("on"+type, element[type+handler]);
		}
	},
	
	removeEvent : function(element, type, handler)
	{
		if(element.removeEventListener)
		{
			element.removeEventListener(type, handler, false);
		}
		else if(element.detachEvent)
		{
			element.detachEvent("on"+type, element[type+handler]);
			element[type+handler] = null;
		}
	},
	
	getEventObject : function(e)
	{
		return e || window.event;
	},
	
	getTarget : function(e)
	{
		e = this.getEventObject(e);
		var target = e.target || e.srcElement;
		if(target.nodeType == 3)	//如果是Safari下的文本节点
		{
			target = target.parentNode;
		}
		return target;
	},
	
	getCharCode : function(e)
	{
		e = this.getEventObject(e);
		if(typeof e.charCode == "number")
			return e.charCode;
		else
			return e.keyCode;
	},
	
	preventDefault : function(e)
	{
		e = this.getEventObject(e);
		if(e.preventDefault)
			e.preventDefault();
		else
			e.returnValue = false;
	},
	
	stopPropagation : function(e)
	{
		e = this.getEventObject(e);
		if(e.stopPropagation)
			e.stopPropagation();
		else
			e.cancelBubble = true;
	}
};

发表于 2015-08-18 20:53:10 回复(0)
// event(事件)工具集,来源:github.com/markyun
markyun.Event = {
    // 页面加载完成后
    readyEvent : function(fn) {
        if (fn==null) {
            fn=document;
        }
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = fn;
        } else {
            window.onload = function() {
                oldonload();
                fn();
            };
        }
    },
    // 视能力分别使用dom0||dom2||IE方式 来绑定事件
    // 参数: 操作的元素,事件名称 ,事件处理程序
    addEvent : function(element, type, handler) {
        if (element.addEventListener) {
            //事件类型、需要执行的函数、是否捕捉
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent('on' + type, function() {
                handler.call(element);
            });
        } else {
            element['on' + type] = handler;
        }
    },
    // 移除事件
    removeEvent : function(element, type, handler) {
        if (element.removeEnentListener) {
            element.removeEnentListener(type, handler, false);
        } else if (element.datachEvent) {
            element.detachEvent('on' + type, handler);
        } else {
            element['on' + type] = null;
        }
    }, 
    // 阻止事件 (主要是事件冒泡,因为IE不支持事件捕获)
    stopPropagation : function(ev) {
        if (ev.stopPropagation) {
            ev.stopPropagation();
        } else {
            ev.cancelBubble = true;
        }
    },
    // 取消事件的默认行为
    preventDefault : function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    // 获取事件目标
    getTarget : function(event) {
        return event.target || event.srcElement;
    },
    // 获取event对象的引用,取到事件的所有信息,确保随时能使用event;
    getEvent : function(e) {
        var ev = e || window.event;
        if (!ev) {
            var c = this.getEvent.caller;
            while (c) {
                ev = c.arguments[0];
                if (ev && Event == ev.constructor) {
                    break;
                }
                c = c.caller;
            }
        }
        return ev;
    }
};

发表于 2015-07-27 15:35:44 回复(0)