1、以下是JavaScript事件兼容性寫法,使用者可以隨意使用,兼容所有瀏覽器。包括IE6(親測)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="demo"> <a>點擊我將獲得節點1</a> <a>點擊我將獲得節點2</a> </p> <script type="text/javascript"> // event(事件)工具集 eventUntil = { // 頁面加載完成后 // 主要是原生JS,頁面只能加載一次window.onload;這里使用該方法可以綁定多個方法。 readyEvent : function(fn) { if (fn==null) { fn=document; } var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = fn; } else { window.onload = function() { oldonload(); fn(); }; } }, // 視能力分別使用dom0||dom2||IE方式 來綁定事件 // 下面的順序:標准dom2,IE dom2, dom // 參數: 操作的元素,事件名稱 ,事件處理程序 addEvent : function(element, type, handler) { if (element.addEventListener) { //事件類型、需要執行的函數、是否捕捉 element.addEventListener(type, handler, false); } else if (element.attachEvent) { 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();// 標准w3c } else { ev.cancelBubble = true;// IE } }, // 取消事件的默認行為 preventDefault : function(event) { if (event.preventDefault) { event.preventDefault();// 標准w3c } else { event.returnValue = false;// IE } }, // 獲取事件目標 getTarget : function(event) { // 標准W3C 和 IE return event.target || event.srcElement; }, // 獲取event對象的引用,取到事件的所有信息,確保隨時能使用event; getEvent : function(e) { var ev = e || window.event; if (!ev) { var c = this.getEvent.caller; while (c) { ev = c.arguments[0]; if (ev && Event == ev.constructor) { break; } c = c.caller; } } return ev; } }; eventUntil.readyEvent(function(){ console.log("相比於window.onload可以綁定多個 按順序執行。"); }) eventUntil.addEvent(document.getElementById("demo") , "click" , function(){ alert("我點擊了p元素") }) </script> </body> </html>