您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 關(guān)于javascript中的事件學(xué)習(xí)及總結(jié)

關(guān)于javascript中的事件學(xué)習(xí)及總結(jié)

文章來源：365jz.com 點(diǎn)擊數(shù)：356 更新時(shí)間：2009-09-18 10:32 參與評(píng)論

1關(guān)于事件對(duì)象
ie:事件對(duì)象是window對(duì)象的一個(gè)屬性event
dom：event對(duì)象是作為唯一參數(shù)傳遞給事件處理函數(shù)。arguments[0]

2關(guān)于IE與DOM事件兼容性的總結(jié)(參考javascript高級(jí)程序設(shè)計(jì))

DOM屬性/方法	IE屬性/方法
altKey	altKey
bubbles	-
button	button
cancelBubble	cancelBubble
charCode	keyCode
clientX	clientX
clientY	clientY
ctrlKey	ctrlKey
currentTarget	-
detail	-
eventPhase	-
isChar	-
keyCode	keyCode
metaKey	-
pageX	clientX+document.body.scrollLeft
pageY	clientY+document.body.scrollTop
preventDefault()	returnValue = false
relateTarget	fromElement/toElement
screenX	screenX
screenY	screenY
shiftKey	shiftKey
stopPropagation()	cancelBubble = true
target	srcElement
timeStamp	-
type	type

具體的屬性和方法意思我就不寫清楚了，有不太明白的可以baidu、google一下~

3關(guān)于跨平臺(tái)事件（針對(duì)第二點(diǎn)各個(gè)屬性在ie和ff下的不同）
在這里javascript高級(jí)程序設(shè)計(jì)一書總結(jié)了一個(gè)容器對(duì)象，可以方便的解決事件兼容性問題。
具體如下：

EventUtil

4里面會(huì)用到判斷瀏覽器是什么牌子的另一個(gè)腳本（detect.js）
具體代碼如下：

detect.js

4相關(guān)測(cè)試代碼。

test

5在自己測(cè)試中遇到的兩個(gè)問題。
1用addEventLisenter(dom)/attachEvent(ie)時(shí)如果針對(duì)的事件觸發(fā)對(duì)象是window，
事件函數(shù)必須寫為聲明式的像這樣function foo(){}

//錯(cuò)誤的寫法(變量式)ie會(huì)報(bào)語法錯(cuò)誤
<script>
window.attachEvent("onload",foo);
   var foo = function()
   {
   alert("loaded");
   };
</script>
//正確的寫法（聲明式）
<script>
window.attachEvent("onload",foo);
  function foo()
   {
   alert("loaded");
   };
</script>

其他的頁面元素則兩者皆可。

問題二：關(guān)于同一對(duì)象連續(xù)使用attachEvent執(zhí)行順序的問題
猜猜會(huì)先執(zhí)行那一個(gè)alert?

<html>

<head>

var app = function()

{

var obj = document.getElementById("mypp");

obj.attachEvent("onclick",foo1);

obj.attachEvent("onclick",foo2);

}

var foo1 = function()

{

alert("clicked!");

};

var foo2 = function()

{

alert("also clicked!");

};

</script>

</head>

</body>

</html>

答案是上面的代碼會(huì)先執(zhí)行第二個(gè)alert。
如果你覺得你的思維是正確的那么再看看下面的代碼：

test2

一段關(guān)于此的英文解釋：
When event fires on the object, the object's event handler is called before pDisp, the specified function. If you attach multiple functions to the same event on the same object, the functions are called in random order, immediately after the object's event handler is called.
引用網(wǎng)上一位高人說的：
并不是什么隨機(jī)問題，你可以去研究研究哈希對(duì)象，這種對(duì)象插入新元素的時(shí)候并不是順序插入的，而是根據(jù)計(jì)算所得的hash值而定的，但在取用這些對(duì)象的時(shí)間是按照一定的順序取的，所以就會(huì)出現(xiàn)你這種所謂的亂序問題。我估計(jì)DHTML里的這些對(duì)象的事件處理函數(shù)存放及JS對(duì)象都是一個(gè)個(gè)哈希對(duì)象，都是key-value這種鍵值對(duì)的模式。

所以在使用上還是要慎重的，最好不要做依賴于順序的設(shè)計(jì)。

Tag標(biāo)簽: javascript,事件,event