1017
04.javascript事件綁定
一、傳統的方法：
// 例1：查找第一個<form>元素並為其綁定submit事件處理函數 document.getElementsByTagName(“form”)[0].onsubmit = function(e){ return stopDefault( e );//停止表單提交的默認行為 }; // 例2：為頁麵body元素綁定鍵盤敲擊事件 document.body.onkeypress = myKeyPressHandler; // 例3：為頁麵加載完畢綁定事件 window.onload = function(){ … };
二、W3C的方法（IE不支持）：
// 例1：查找第一個<form>元素並為其綁定submit事件處理函數 document.getElementsByTagName(“form”)[0].addEventListener(‘click’,function(e){ return stopDefault( e );//停止表單提交的默認行為 }, false); // 例2：為頁麵body元素綁定鍵盤敲擊事件 document.body.addEventListener(‘keypress’, myKeyPressHandler, false); // 例3：為頁麵加載完畢綁定事件 window.addEventListener(‘load’, function(){ … }, false);
三、IE綁定的方法：
// 例1：查找第一個<form>元素並為其綁定submit事件處理函數 document.getElementsByTagName(“form”)[0].attachEvent(‘onclick’,function(){ return stopDefault(); //停止表單提交的默認行為 },); // 例2：為頁麵body元素綁定鍵盤敲擊事件 document.body.attachEvent(‘onkeypress’, myKeyPressHandler); // 例3：為頁麵加載完畢綁定事件 window.attachEvent(‘onload’, function(){ … });
四、通用的方法：
function addEvent(element, type, handler) { if (!handler.$$guid) { handler.$$guid = addEvent.guid++; //為每一個事件處理函數賦予一個獨立的ID } //為元素建立一個事件類型的散列表 if (!element.events) { element.events = {}; } //為沒對元素/事件建立一個事件處理函數的散列表 var handlers = element.events[type]; if (!handlers) { handlers = element.events[type] = {}; //存儲已有的事件處理函數（如果已存在一個） if (element["on" + type]) { handelers[0] = element["on" + type]; //在散列表中存儲該事件的處理函數 handelers[handler.$$guid] = handler; //賦予一個全局事件處理函數來處理所有工作 element["on" + type] = handleEvent; }; //創建獨立ID的計數器 addEvent.guid = 1; function removeEvent(element, type, handler) { //從散列表中刪除事件處理函數 if (element.events && element.events[type]) { delete element.events[type][handler.$$guid]; } function handleEvent(event) { var returnValue = true; //獲取事件對象（IE使用全局的事件對象） event = event || fixEvent(window.event); //獲取事件處理函數散列表的引用 var handlers = this.events[event.type]; //依次執行每個處理函數 for (var i in handlers) { this.$$handleEvent = handlers[i]; if (this.$$handleEvent(event) === false) { returnValue = false; } } return returnValue; }; //增加一些IE事件對象缺乏的方法 function fixEvent(event) { event.preventDefault = fixEvent.preventDefault; event.stopPropagation = fixEvent.stopPropagation; return event; } fixEvent.preventDefault = function () { this.returnValue = false; } fixEvent.stopPropagation = function () { this.cancelBubble = true; } } } }
最後更新：2017-04-02 06:51:33