javascript 给DOM绑定事件方法的3种写法

最新推荐文章于 2024-12-12 05:06:19 发布

原创最新推荐文章于 2024-12-12 05:06:19 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #IE #ViewUI

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了三种实现跨浏览器兼容的事件监听方法，包括直接在运行时判断、初始化时判断及懒加载模式。这些方法解决了不同浏览器间事件监听API的差异问题。

二话不说上代码：


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,在不使用这个函数的情况下，就不会被初始化，也就减少了初始化的判断