Question

求大神帮我注释一下这段js代码，越详细越好.

var EventUtil = {

addHandler : function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler : function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},
getEvent : function (event) {
return event || window.event;
},
getTarget : function (event) {
return event.target || event.srcElement;
}
}

var getStyle = function (el, style) {
if (el.currentStyle) {
style = style.replace(/\-(\w)/g, function (all, letter) {
return letter.toUpperCase();
});
var value = el.currentStyle[style];
return value;
} else {
return document.defaultView.getComputedStyle(el, null).getPropertyValue(style);
}
}

var toggleDisplay = function (element) {
var display = getStyle(element, "display");
if (display == "none") {
element.style.display = "block";
} else {
element.style.display = "none";
}
}

Answer 1

//定义对象EventUtil
var EventUtil = {
	/**
	 * 添加事件监听
	 * @param element html元素
	 * @param type 事件类型 例如 click,load
	 * @param handler 监听函数
	 */
	addHandler : function(element, type, handler) {
		if (element.addEventListener) {
			element.addEventListener(type, handler, false);
		} else if (element.attachEvent) {
			element.attachEvent("on" + type, handler);
		} else {
			element["on" + type] = handler;
		}
	},
	/**
	 * 移除事件监听
	 * @param element html元素
	 * @param type 事件类型 例如 click,load
	 * @param handler 要移除的监听函数
	 */
	removeHandler : function(element, type, handler) {
		if (element.removeEventListener) {
			element.removeEventListener(type, handler, false);
		} else if (element.detachEvent) {
			element.detachEvent("on" + type, handler);
		} else {
			element["on" + type] = null;
		}
	},
	/**
	 * 获取Event事件对象
	 */
	getEvent : function(event) {
		return event || window.event;
	},
	/**
	 * 获取事件源 例如 用鼠标点击页面上某个元素，即是获取被点击的元素
	 */
	getTarget : function(event) {
		return event.target || event.srcElement;
	}
}

/**
 * 获取style 风格
 * @param el html元素
 * @param style 具体的风格名称 比如width height
 */
var getStyle = function(el, style) {
	if (el.currentStyle) {
		style = style.replace(/\-(\w)/g, function(all, letter) {
			return letter.toUpperCase();
		});
		var value = el.currentStyle[style];
		return value;
	} else {
		return document.defaultView.getComputedStyle(el, null)
				.getPropertyValue(style);
	}
}
/**
 * 显示或隐藏元素  如果元素是显示的则隐藏，如果是隐藏则显示
 * @param element html元素
 */
var toggleDisplay = function(element) {
	var display = getStyle(element, "display");
	if (display == "none") {
		element.style.display = "block";
	} else {
		element.style.display = "none";
	}
}