天天看點

IE和FireFox的Javascript的事件和事件處理總結

< DOCTYPE html PUBLIC -WCDTD XHTML StrictEN httpwwwworgTRxhtmlDTDxhtml-strictdtd>

使IE和FireFox事件停止的方法:

<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)" />

target="_blank">

mouseDown me

</a>

var myLink = document.getElementByIdx("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中添加一個新的函數來處理事件。

<div id="mydiv">mouseDown me</div>

var mydiv = document.getElementByIdx("mydiv");

var oldHandler = mydiv.onclick;

mydiv.onclick = function(){ newHandler(); if(oldHandler!=undefined) oldHanlder();}

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定義事件的方法。

function down()

alert('down');

mydiv.onclick = down;

mydiv.addEventListener("click",function(e){ alert("down2");},false);

由于FireFox的支援DOM2的事件模型。是以我們可以使用:

得到FireFox的事件

<div id="myDiv">

</div>

function TestThis(event)

alert(this.href);

alert(event);

alert(typeof event.preventDefault);

alert(event.screenX);

alert(event.screenY);

alert(event.clientX);

alert(event.clientY);

myLink.addEventListener("click",TestThis,true);

DOM2的事件模型函數

addEventListener

添加事件監聽函數。

removeEventListener

删除事件監聽函數。

preventDefault

組織預設事件的發生

stopPropagation

可以組織事件從目前正在處理它的節點傳播

createEvent

建立事件

發生的事件的類型

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屬性

0表示左鍵,1表示中間鍵,2表示右鍵。

altKey,ctrlKey,metaKey

,shitKey

是否Alt鍵,Ctrl鍵,Meta鍵,Shift鍵。

聲明滑鼠指針相對客戶區或浏覽器視窗的X坐标和Y坐标。

screenX,screenY

聲明滑鼠指針相對于使用者顯示器的左上角X坐标和Y坐标。

relateTarget

對于mouseover事件,它是滑鼠移動到目标上時所離開的那個節點。對于mouseout事件,他是離開目标時,滑鼠進入節點。

事件傳播三個階段:1,捕捉階段,事件從Document對象沿着文檔樹向下傳播給目标節點。

2,目标節點觸發階段:在目标上的适合的事件處理程式将運作。3,氣泡階段,在這個階段,事件将從目标元素向上傳播或者氣泡回Document對象的文檔層次。

本文轉自 netcorner 部落格園部落格,原文連結: http://www.cnblogs.com/netcorner/archive/2007/12/04/2912249.html ,如需轉載請自行聯系原作者

繼續閱讀