主要是解决了老顽固IE的问题。
EventUtil
var EventUtil = {
// 视能力分别使用dom0||dom2||IE方式 来绑定事件
// 参数: 操作的元素,事件名称 ,事件处理程序
addEvent : function(element, type, handler) {
if (element.addEventListener) {
//事件类型、需要执行的函数、是否捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
// 这里的event需要用function包裹,
// 是为了调handler时的上下文为当前元素
// addEventListener默认就是
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;
}
};
StyleUtil
var StyleUtil = {
getStyleSheet: function(elem) {
return elem.sheet || elem.styleSheet;
},
insertRule: function(sheet, selector, cssText, position) {
if (sheet.insertRule) {
sheet.insertRule(selector + "{" + cssText + "}", position);
} else if ( sheet.addRule ) {
sheet.addRule(selector, cssText, position);
}
},
removeRule: function( sheet, index ) {
if (sheet.deleteRule) {
sheet.deleteRule(index);
} else if (sheet.removeRule) {
sheet.removeRule(index);
}
}
};
参考
1、《javascript 高级程序设计(第3版)》
2、前端总结