事件綁定

事件綁定有兩種，傳統事件綁定，現代事件綁定。傳統事件綁定有內聯模式和腳本模式。腳本模式即把一個函數體賦給一個對象的事件屬性。

window.onload=function() { var domb=document.getElementById('bd'); domb.onclick=function(){ alert('按鈕點擊'); };
};

傳統事件綁定存在的問題:

1.同一個對象的事件屬性多個函數賦值不少次，前面的會被覆蓋掉，只顯示最後一個。

解決方法，把第一個函數的事件保存下來，而後再去執行一次。

window.onload=function(){ alert('q'); }; if(typeof window.onload=='function') { var saved=null; saved=window.onload; } window.onload=function(){ saved(); alert('s'); }; 

 
2.同一個事件類型下，不一樣事件的切換

    解決方法:  當執行了第一個事件後，把第二個事件在第一個事件函數中賦值給點擊事件。

把添加事件封裝在一個函數中去。而且一併解決上述問題。

//一個對象裏面的鍵值對，也能夠用數組形式訪問，屬性放在中括號裏。一個事件函數，裏面不該該再放同名的//事件函數。

function addEvent(obj,type,fn) { var saveEvent=null; if(typeof obj['on'+type]=='function') saveEvent=obj['on'+type]; obj['on'+type]=function(){ if(saveEvent) saveEvent(); fn.call(this); }; }

 

添加事件後必須移除，否則內存會溢出

//刪除事件 function removeEvent(obj,type) { if(obj['on'+type]) obj['on'+type]=null; }

存在的問題:

1.如何避免添加已經添加過的函數。須要遍歷事件，重名不添加。

2.刪除事件時候，精確刪除某個對象，某個類型，某個名稱的函數。避免誤刪。

 

 

關於現代事件綁定，W3c自帶兩個事件添加刪除函數
addEventListener removeEventListener

window.addEventListener('load',function () { alert('w3c');

 },false );

能夠解決
1.多個函數添加到同一個事件類型下被覆蓋的問題

window.addEventListener('load',function () { alert('w3c');//最早被執行的代碼 },false ); window.addEventListener('load',function () { alert('w3把'); },false ); window.addEventListener('load',function () { alert('w3c5茶');//最後被執行的代碼 },false );

冒泡執行順序，從最上面的代碼開始往下執行，而且不會覆蓋，每一個事件都會被執行到。
2.解決了重複添加同一個函數的斷定問題

window.addEventListener('load',fun,false ); window.addEventListener('load',fun,false ); function fun() { alert('lee'); }

只會被執行一次，相同函數，重複添加，會只顯示一個，其餘的被屏蔽掉。

3.解決了this指針傳遞的問題

window.addEventListener('load',function(){ var box=document.getElementById('box'); box.addEventListener('click',function() { alert(this); },false); },false );

在現代事件函數中，第二個參數是函數，該函數內的指針指的是它添加的對象，可是在傳統事件指的是window必須手工添加指針傳遞。

冒泡與捕獲

window.addEventListener('load',function () { var box=document.getElementById('box'); box.addEventListener('click',function() { alert(this); },true); document.addEventListener('click',function() { alert(this); },true); },false );

冒泡就是對於不一樣的dom對象，若是添加了同一個類型的事件，從內到外的順序執行事件，div先執行，document後執行。捕獲是從外到內的順序執行事件。document 先執行，div後執行。
IE自帶的添加刪除事件方法
attachEvent detachEvent

window.attachEvent('onload',function(){ alert('le');//最後執行的代碼 }}; window.attachEvent('onload',function(){ alert('la');//最早執行的代碼 }}

 

添加多個事件函數執行順序和其它現代方法不同，她是從下到上執行。
只能冒泡，不能判斷重複添加的事件函數，不能傳遞this指針，指針默認指向window

解決方案:獲取點擊事件指針
var that=window.event.srcElement;
ie現代事件綁定方法能夠將事件做爲參數傳遞進去,傳統方法不能把事件做爲函數參數傳遞。

window.attachEvent('onload',function(evt){ alert(evt); }};

ie和其餘瀏覽器添加事件移除事件捕獲事件對象的兼容性解決

//添加事件兼容性解決

function addEvent(obj,type,fn) { if(obj.addEventListener) obj.addEventListener(type,fn,false); else if(obj.attachEvent) obj.attachEvent('on'+type,fn); }

//移除事件兼容 

function removeEvent(obj,type,fn) { if(obj.removeEventListener) obj.removeEventListener(type,fn,false); else if(obj.detachEvent) obj.detachEvent('on'+type,fn); } 

//獲取目標事件

 function getTarget(e){ if(e.target) return e.target; else if(window.event.srcElement) return e.srcElement; }

 

 

 

獲取事件中那個主對象旁邊的離得最近相關對象
w3c標準

addEvent(window,'load',function() { var spanDom=document.getElementById('box'); addEvent(spanDom,'mouseover',function(e) { alert(e.relatedTarget); } ); } );

ie標準的方法

ie標準的相關對象，鼠標移入mouseover 必須對應fromElement()鼠標移出mouseout 必須對應toElement()

addEvent(window,'load',function() { var spanDom=document.getElementById('box'); addEvent(spanDom,'mouseout',function(e) { alert(window.event.toElement); } ); } );

兩款瀏覽器兼容性解決

//兩款瀏覽器兼容性解決 function getRelatedElement(e){ var e=e.relatedTarget||window.event; if(e.srcElement) { if(e.type=='mouseover') return e.fromElement; if(e.type=='mouseout') { return e.toElement; } } else if(e.relatedTarget) { return e.relatedTarget; } }

用傳統方式阻止瀏覽器默認行爲

addEvent(window,'load',function() { var a=document.getElementsByTagName('a')[0]; a.onclick=function(){ alert('qwe'); return false; }; } );

w3c阻止默認行爲

addEvent(window,'load',function() { var a=document.getElementsByTagName('a')[0]; addEvent(a,'click',function(e){ e.preventDefault(); alert('qaaa'); }); } );

 

阻止默認行爲的兼容

//阻止默認行爲的兼容 function preventDft(e) { var e=e||window.event; if(e.preventDefault) e.preventDefault(); else e.returnValue=false; }

 

上下文菜單事件

addEvent(window,'load',function() { var t=document.getElementsByTagName('textarea')[0]; addEvent(t,'contextmenu',function(e){ preventDft(e); var menu=document.getElementById('menu'); menu.style.display='block'; menu.style.left=e.clientX+'px'; menu.style.top=e.clientY+'px'; }); } );

卸載前事件，關於離開當前頁面的事件

addEvent(window,'beforeunload',function(e) { preventDft(); });

關於鼠標滾輪事件

//對於非火狐瀏覽器 addEvent(document,'mousewheel',function(e) { alert(e.wheelDelta);//滾輪滾動度數  }); //對於火狐瀏覽器 addEvent(document,'DOMMouseScroll',function(e) { alert(e.detail);//滾輪滾動度數 });

DOMContentLoaded readystatechange兩個事件關於加載性能