事件注册于移除的优化

最新推荐文章于 2024-05-15 22:16:44 发布

iteye_12132

最新推荐文章于 2024-05-15 22:16:44 发布

阅读量87

点赞数

分类专栏： JavaScript 文章标签： IE JavaScript performance 浏览器 ViewUI

本文链接：https://blog.csdn.net/iteye_12132/article/details/81882494

版权

JavaScript 专栏收录该内容

117 篇文章 0 订阅

订阅专栏

编写跨浏览器的事件注册、移除代码，一般写法如下：


function addHandler(target, eventType, handler) {
	if (target.addEventListener) { // DOM2 Events
		target.addEventListener(eventType, handler, false);
	} else { // IE
		target.attachEvent("on" + eventType, handler);
	}
}
function removeHandler(target, eventType, handler) {
	if (target.removeEventListener) { // DOM2 Events
		target.removeEventListener(eventType, handler, false);
	} else { // IE
		target.detachEvent("on" + eventType, handler);
	}
}

优化方法一：lazy loading


function addHandler(target, eventType, handler) {
	// overwrite the existing function
	if (target.addEventListener) { // DOM2 Events
		addHandler = function(target, eventType, handler) {
			target.addEventListener(eventType, handler, false);
		};
	} else { // IE
		addHandler = function(target, eventType, handler) {
			target.attachEvent("on" + eventType, handler);
		};
	}
	// call the new function
	addHandler(target, eventType, handler);
}
function removeHandler(target, eventType, handler) {
	// overwrite the existing function
	if (target.removeEventListener) { // DOM2 Events
		removeHandler = function(target, eventType, handler) {
			target.addEventListener(eventType, handler, false);
		};
	} else { // IE
		removeHandler = function(target, eventType, handler) {
			target.detachEvent("on" + eventType, handler);
		};
	}
	// call the new function
	removeHandler(target, eventType, handler);
}

优化方法二：Conditional Advance Loading


var addHandler = document.body.addEventListener ? function(target, eventType,
		handler) {
	target.addEventListener(eventType, handler, false);
} : function(target, eventType, handler) {
	target.attachEvent("on" + eventType, handler);
};
var removeHandler = document.body.removeEventListener ? function(target,
		eventType, handler) {
	target.removeEventListener(eventType, handler, false);
} : function(target, eventType, handler) {
	target.detachEvent("on" + eventType, handler);
};

原文出自：High.Performance.JavaScript