?
使IE和FireFox事件停止的方法：
<!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=gb2312" /> <title>Untitled Document</title> </head> <script type="text/javascript"> </script> <body> <input name="Hello" type="button" value="Hello" onclick="Show(this)" /> <a??? id="myLink"?? href="http://fego.home.cn/members/wg/default.aspx" target="_blank"> mouseDown me </a> <script type="text/javascript"> var myLink = document.getElementById("myLink"); var oldHandler = myLink.onclick; function newHandler() { alert("new handler"); //去掉下面的注釋，就會將事件關閉。 //return false; } function newHandler1() { alert("I can’t Show"); } myLink.onclick = function(){ if(oldHandler!=undefined) ?? oldHanlder(); ?? return newHandler(); } </script> </body> </html> |
通常，如果瀏覽器執行某種默認動作來響應一個事件，那么可以返回false阻止瀏覽器執行相應的動作。
判斷DOM標準的方法：document.implementation.hasFeature(“Events”,”2.0”);
IE的事件：
由于IE不支持DOM2的事件模型，那么我們只有為IE編寫特定的事件模型：
在DOM2的模型中，我們可以使用addEventListener來添加新的事件函數，而我們可以在
IE中添加一個新的函數來處理事件。
<!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=gb2312" /> <title>Untitled Document</title> </head> <script type="text/javascript"> </script> <body> <input name="Hello" type="button" value="Hello" onclick="Show(this)" /> <div id="mydiv">mouseDown me</div> <script type="text/javascript"> var mydiv = document.getElementById("mydiv"); var oldHandler = mydiv.onclick; function newHandler() { alert("new handler"); } mydiv.onclick = function(){ newHandler(); if(oldHandler!=undefined) oldHanlder();} </script> </body> </html> |
?
IE Event對象,只能通過window.event
Event屬性 | 作用 |
type | 與DOMEvent的type相同 |
srcElement | 發生事件的文檔元素。與DOM Event對象的target屬性兼容 |
button | 1表示左鍵，2表示右鍵，4表示中間鍵 |
clientX,clientY | 同DOM的MouseEvent對象的同名屬性兼容 |
offsetX,offsetY | 相對于源元素的位置。 |
altKey,ctrlKey, shitfKey | 同DOM |
keyCode | 得到Keydown，keyup事件的鍵代碼的Unicode |
fromElement, toElement | fromElement聲明mouseover事件中鼠標移動過的文檔元素。 toElement聲明mouseout事件中鼠標移到文檔元素。它們等價于2級DOM中的MouseEvent對象的relatedTarget屬性。 |
cancelBubble | 把它設為true，可以組織當前事件進一步氣泡到包容層次的元素。 |
returnValue | 可以組織瀏覽器執行與事件相關的默認動作。 |
?
FireFox的事件總結：
由于FireFox支持DOM2的事件模型，而且我們也可以使用IE定義事件的方法。
<!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=gb2312" /> <title>Untitled Document</title> </head> <script type="text/javascript"> </script> <body> <input name="Hello" type="button" value="Hello" onclick="Show(this)" /> <div id="mydiv">mouseDown me</div> <script type="text/javascript"> var mydiv = document.getElementById("mydiv"); function down() { ?alert('down'); } mydiv.onclick = down; mydiv.addEventListener("click",function(e){ alert("down2");},false); </script> </body> </html> |
由于FireFox的支持DOM2的事件模型。所以我們可以使用:
得到FireFox的事件
<!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=gb2312" /> <title>Untitled Document</title> </head> ? <body> <div id="myDiv"> ?????? <a id="myLink" href="http://home.fego.cn/members/wg/default.aspx">Link Test Event</a> </div> <script type="text/javascript"> function TestThis(event) { ? alert(this.href); ? alert(event); ? alert(typeof event.preventDefault); ? alert(event.screenX); ? alert(event.screenY); ? alert(event.clientX); ? alert(event.clientY); } var myLink = document.getElementById("myLink"); myLink.addEventListener("click",TestThis,true); </script> </body> </html> |
?
DOM2的事件模型函數 | 作用 |
addEventListener | 添加事件監聽函數。 |
removeEventListener | 刪除事件監聽函數。 |
preventDefault | 組織默認事件的發生 |
stopPropagation | 可以組織事件從當前正在處理它的節點傳播 |
createEvent | 創建事件 |
?
?
Event屬性 | 作用 |
type | 發生的事件的類型 |
target | 發生事件的節點 |
currentTarget | 發生當前在處理的事件的節點 |
eventPhase | 指明了當前事件傳播過程。 Event.CAPTURING_PHASE,Event.AT_TARGET,Event.BUBBLING_PHASE |
timestamp | 一個Date對象，聲明了事件何時發生 |
bubbles | 一個布爾值，是否在文檔樹中氣泡 |
cancelable | 一個布爾值，是否能用preventDefault |
?
作用的對象類型DOMFocusIn,DOMFocusOut和DOMActivate。
UIEvent屬性 | 作用 |
view | 發生事件的Window對象 |
detail | 一個數字，對于click事件，mousedown，mouseup的事件。1代表點擊一次，2代表雙擊，3代表點擊三次。 對于DOMActivate事件,這個字段的值為1，表示正常激活，2表示超級激活，例如雙擊鼠標或同時按下Shift和Enter鍵。 |
?
MouseEvent屬性 | 作用 |
button | 0表示左鍵，1表示中間鍵，2表示右鍵。 |
altKey,ctrlKey,metaKey ,shitKey | 是否Alt鍵，Ctrl鍵，Meta鍵，Shift鍵。 |
clientX,clientY | 聲明鼠標指針相對客戶區或瀏覽器窗口的X坐標和Y坐標。 |
screenX,screenY | 聲明鼠標指針相對于用戶顯示器的左上角X坐標和Y坐標。 |
relateTarget | 對于mouseover事件，它是鼠標移動到目標上時所離開的那個節點。對于mouseout事件，他是離開目標時，鼠標進入節點。 |
?
事件傳播三個階段：1，捕捉階段，事件從Document對象沿著文檔樹向下傳播給目標節點。
2，目標節點觸發階段：在目標上的適合的事件處理程序將運行。3，氣泡階段，在這個階段，事件將從目標元素向上傳播或者氣泡回Document對象的文檔層次。