日期:2014-05-16  浏览次数:20369 次

javascript 给DOM绑定事件方法的3种写法
二话不说上代码:

var Event = {};
//方法一 runtime
Event.addEventListener = function(obj, eventType, listener){
	if(typeof window.addEventListener === 'function') {//DOM2接口
		el.addEventListener(type, fn, false);
	} else if(typeof document.attachEvent === 'function') {//IE
		el.attachEvent('on' + type, fn);
	} else {//DOM0接口
		el['on' + type] = fn;
	}
};


//方法二 initialize
if(typeof window.addEventListener === 'function') {//DOM2接口
	Event.addEventListener = function(el, type, fn) {
		el.addEventListener(type, fn, false);
	};
} else if(typeof document.attachEvent === 'function') {//IE
	Event.addEventListener = function(el, type, fn) {
		el.attachEvent('on' + type, fn);
	};
} else {//DOM0接口
	Event.addEventListener = function(el, type, fn) {
		el['on' + type] = fn;
	};
}


//方法三 lazy mode
Event.addEventListener = function(obj, eventType, listener){
	if (!Event.addEventListener)
	{
		if(typeof window.addEventListener === 'function') {//DOM2接口
			Event.addEventListener = function(el, type, fn) {
				el.addEventListener(type, fn, false);
			};
		} else if(typeof document.attachEvent === 'function') {//IE
			Event.addEventListener = function(el, type, fn) {
				el.attachEvent('on' + type, fn);
			};
		} else {//DOM0接口
			Event.addEventListener = function(el, type, fn) {
				el['on' + type] = fn;
			};
		}
	}
	Event.addEventListener(obj, eventType, listener);
}


第一种方法,不足之处在于只要用到这个函数就需要对DOM判断一遍,开始判断一遍是不是更好呢?

第二个方法,则是初始化的,判断了一次DOM,然后也使得Event.addEventListener指向了正确的方法,缺点就是不管用不用到这个函数,都被初始化了

这第三个方法正好补足了这点,所以被称做lazy mode,在不使用这个函数的情况下,就不会被初始化,也就减少了初始化的判断