Event? keyCode:

http://unixpapa.com/js/key.html

?

?

?

from:http://www.cnblogs.com/manhoo/archive/2009/10/09/1579643.html&

http://blog.csdn.net/jackpk/archive/2010/10/18/5948021.aspx

?

不同瀏覽器兼容：

http://blog.csdn.net/wangchuanbaodhcc/article/details/6706308

http://www.iteye.com/topic/603378

?

attachEvent 與 addEventListener 區別
適應的瀏覽器版本不同，同時在使用的過程中要注意
attachEvent 方法?????????????? 按鈕 onclick
addEventListener 方法??? 按鈕 click

?

window.onload = function(){
???????? var element = document.getElementById("para");
???????? if(element.addEventListener){ // firefox , w3c
??????????????? element.addEventListener("focus",test,false);
??? element.addEventListener("focus",pig,false);
???????? } else {?? // ie
??? element.attachEvent("onfocus",test);
??? element.attachEvent("onfocus",pig);
???????? }
}

?

JavaSciprt事件中有兩個很重要的特性：事件冒泡 以及目標元素 。

事件冒泡: 當一個元素上的事件被觸發的時候，比如說鼠標點擊了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發。這一過程被稱為事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。

目標元素: 任何一個事件的目標元素都是最開始的那個元素，在我們的這個例子中也就是按鈕，并且它在我們的元素對象中以屬性的形式出現。使用事件代理的話我們可以把事件處理器添加到一個元素上，等待一個事件從它的子級元素里冒泡上來，并且可以很方便地得知這個事件是從哪個元素開始的。

事件的冒泡和捕獲

捕獲是從上級元素到下級元素，冒泡是從下級元素到上級元素.

在IE中，每個元素和window對象都有兩個方法：attachEvent()和detachEvent()。attachEvent()用來給一個事件附加事件處理函數。而detachEvent()用來將事件處理函數分離出來。Eg.

　　var fnClick = function() {

　　alert(“Clicked!”);

　　}

　　var oDiv = document.getElementById(“div1”);

　　oDiv.attachEvent(“onclick”, fnClick);

　　oDiv.detachEvent(“onclick”, fnClick);

事件的冒泡有什么好處呢？

想象一下現在我們有一個10列、100行的HTML表格，你希望在用戶點擊表格中的某一單元格的時候做點什么。比如說我有一次就需要讓表格中的每一個單元格在被點擊的時候變成可編輯狀態。如果把事件處理器加到這1000個單元格會產生一個很大的性能問題，并且有可能導致內存泄露甚至是瀏覽器的崩潰。相反地，使用事件代理的話，你只需要把一個事件處理器添加到table元素上就可以了，這個函數可以把點擊事件給截下來，并且判斷出是哪個單元格被點擊了。

代碼很簡單，我們所要關心的只是如何檢測目標元素而已。比方說我們有一個table元素，ID是“report”，我們為這個表格添加一個事件處理器以調用editCell函數。editCell函數需要判斷出傳到table來的事件的目標元素?？紤]到我們要寫的幾個函數中都有可能用到這一功能，所以我們把它單獨放到一個名為getEventTarget的函數中：

function getEventTarget(e) {
? e = e || window.event;
? return e.target || e.srcElement;
}

e這個變量表示的是一個事件對象，我們只需要寫一點點跨瀏覽器的代碼來返回目標元素， 在IE里目標元素放在srcElemtn屬性或event.toElement 屬性 中，而在其它瀏覽器里則是target或event.relatedTarget 屬性。

接下來就是editCell函數了，這個函數調用到了getEventTarget函數。一旦我們得到了目標元素之后，剩下的事情就是看看它是否是我們所需要的那個元素了。

function editCell(e) {
? var target = getEventTarget(e);
? if(target.tagName.toLowerCase() === 'td') {
??? // DO SOMETHING WITH THE CELL
? }
}

在editCell函數中，我們通過檢查目標元素標簽名稱的方法來確定它是否是一個表格的單元格。這種檢查也許過于簡單了點；如果它是這個目標元素單元格里的另一個元素呢？我們需要為代碼做一點小小的修改以便于其找出父級的td元素。如果說有些單元格不需要被編輯怎么辦呢？此種情況下我們可以為那些不可編輯的單元格添加一個指定的樣式名稱，然后在把單元格變成可編輯狀態之前先檢查它是否不包含那個樣式名稱。選擇總是多樣化的，你只需找到適合你應用程序的那一種。

事件冒泡的優點和缺點:

1.那些需要創建的以及駐留在內存中的事件處理器少了。

這是很重要的一點，這樣我們就提高了性能，并降低了崩潰的風險。

?
2.在DOM更新后無須重新綁定事件處理器了。

如果你的頁面是動態生成的，比如說通過Ajax，你不再需要在元素被載入或者卸載的時候來添加或者刪除事件處理器了。

?
潛在的問題也許并不那么明顯，但是一旦你注意到這些問題，你就可以輕松地避免它們： 你的事件管理代碼有成為性能瓶頸的風險，所以盡量使它能夠短小精悍。

不是所有的事件都能冒泡

blur、focus、load和unload不能像其它事件一樣冒泡。事實上blur和focus可以用事件捕獲而非事件冒泡的方法獲得（在IE之外的其它瀏覽器中）。

需要注意的是:

如果你的代碼處理mousemove事件的話你遇上性能瓶頸的風險可就大了，因為mousemove事件觸發非常頻繁。而mouseout則因為其怪異的表現而變得很難用事件代理來管理。

如何避免事件冒泡:

1.方法

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >???
< html? xmlns ="http://www.w3.org/1999/xhtml"?? >???
< head >???
< meta? http-equiv ="Content-Type"? content ="text/html; charset=utf-8"?? />
???? < title > JS中的事件冒泡 </ title >???
???? < script? type ="text/javascript" > <!--???
???? function? ClickTr()??
??? {
??????? alert( typeof?? window.event);
??????? e? =? event || window.event;
????? alert( " TR " );??
????? alert( typeof? e.srcElement);
??? }??
???? function? ClickTd()??
??? {??
????? alert( " TD " );??
?????? // 如果不加下面的代碼點擊先會彈出TD然后彈出TR，原因是HTML是對象結構當點擊AAA的時候（執行）,會冒泡到TR-->table-->body->document->window,當用event.cancelBubble=true的時候就說明阻止該冒泡行為????
????? event.cancelBubble = true ;??
??? }??
??????
//? --></script>???
< / head>???
< body >???
< div style = " background-color:Azure; "? mce_style = " background-color:Azure; " > 目的當點擊BBB的時候彈出TR,當點擊AAA的時候彈出TD < / div>???
< table >???
< tr onclick = " ClickTr(); " >???
< td onclick = " ClickTd(); " > AAA < / td>???
< td > BBB < / td>???
< / tr>???
< / table>???
< / body>???
< / html>?
?
2.方法
在IE下解決問題很簡單，用onMouseEnter、onMouseLeave 來代替onMouseOver、onMouseOut就行了，他們的作用基本相同，前者不會發生冒泡。但是firefox下沒有這兩個事件.
?
3.方法:
window.event.cancelBubble = true (IE)??? event.stopPropagation()? event.preventDefault() (Firefox)
?
阻止jQuery事件冒泡
?
jQuery對DOM的事件觸發具有冒泡特性。有時利用這一特性可以減少重復代碼，但有時候我們又不希望事件冒泡。這個時候就要阻止jQuery.Event冒泡。

在jQuery.Event的文檔 中的開頭得知，jQuery.Event對象是符合W3C標準的一個事件對象，同時jQuery.Event免去了檢查兼容IE的步驟。

jQuery.Event提供了一個非常簡單的方法來阻止事件冒泡：event.stopPropagation();

$( "p" ).click( function (event){
???? event.stopPropagation(); // do something
})
但是這個方法對使用live 綁定的事件沒有作用，需要一個更簡單的方法阻止事件冒泡：return false;

$( "p" ).live( "click" , function (){
???? $( this ).after( "Another paragraph!" );
???? return false ;
});

?

總結

以上是生活随笔為你收集整理的JS事件冒泡浏览器兼容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。