校验浏览器是否支持某事件：document.implementation.hasFeature("FocusEvent","3.0")
对HTML元素添加事件的方法有：
1、
<a onclick='xxxx()'></a> <body onload='xxx()'>
2、
window.onload = function(){ //do something } document.getElementById("myBt").click=function(){ //do something } //------------------ var doClick = function(){ //do something } document.getElementById("myBt").click=doClick;
3、当需要添加的元素是动态的，则需要动态添加事件,但由于不同主流浏览器对动态添加事件支持的方法不一致，故需要检查浏览器的支持性
EventUtil.js
var EventUtil = { //绑定事件,注意type的值为非on开始的事件，例如：click而非onclick 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; } }, getButton: function(event){ if (document.implementation.hasFeature("MouseEvents", "2.0")){ return event.button; } else { switch(event.button){ case 0: case 1: case 3: case 5: case 7: return 0; case 2: case 6: return 2; case 4: return 1; } } }, //获取键盘的keypress事件中按键的code getCharCode: function(event){ if (typeof event.charCode == "number"){ return event.charCode; } else { return event.keyCode; } }, //获取剪贴板中的数据 getClipboardText: function(event){ var clipboardData = (event.clipboardData || window.clipboardData); return clipboardData.getData("text"); }, //获取事件对象 getEvent: function(event){ return event ? event : window.event; }, //鼠标移出后鼠标所在的焦点对象 getRelatedTarget: function(event){ if (event.relatedTarget){ return event.relatedTarget; } else if (event.toElement){ return event.toElement; } else if (event.fromElement){ return event.fromElement; } else { return null; } }, //获取激发事件的源对象 getTarget: function(event){ return event.target || event.srcElement; }, //获取所有浏览器下鼠标滚轮滚动时的wheelDelta的值，向上则为120的正数+，向下则为120的正数- getWheelDelta: function(event){ if (event.wheelDelta){ return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta); } else { return -event.detail * 40; } }, //取消事件的默认行为,例如<a href="www.xxx.com">如果在onclick时间中调用该方法则不会打开链接 preventDefault: function(event){ if (event.preventDefault){ event.preventDefault(); } else { event.returnValue = false; } }, //移除绑定的事件 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; } }, //设置剪贴板的数据 setClipboardText: function(event, value){ if (event.clipboardData){ event.clipboardData.setData("text/plain", value); } else if (window.clipboardData){ window.clipboardData.setData("text", value); } }, //阻止事件的继续冒泡执行 stopPropagation: function(event){ if (event.stopPropagation){ event.stopPropagation(); } else { event.cancelBubble = true; } } };
调用方法：
var btn = document.getElementById("myBtn"); var handler = function(){ alert("Clicked"); }; EventUtil.addHandler(btn, "click", handler); var removeBtn = document.getElementById("myRemoveBtn"); EventUtil.addHandler(removeBtn, "click", function(){ EventUtil.removeHandler(btn, "click", handler); });