Javascript基礎知識（二）事件_基礎知識

Event對象：(event對像是window對象的屬性，當事件發生時，同時產生event對象，事件結束，event對象消失)

IE中:window.event;//取得物件

DOM中：argument[0];//取得物件

IE中Event物件常用的屬性方法：

1.clientX:事件發生時，滑鼠指標在客戶區(不包含工具欄，捲軸等)的X座標；

2.clientY：事件發生時，滑鼠指標在客戶區(不包含工具欄，滾動條等)的Y座標；

3.keyCode：對於keyCode事件，指示按下的鍵的Unicode字符，對於keydown/keyup事件，指示按下的鍵盤是數字表示器(獲得按鍵的數值)；

4.offsetX：滑鼠指標相對於引發事件的物件的X座標；

5.offsetY：老鼠指標相對於引發事件的物件的Y座標；

6.srcElement：導致事件發生的元素；

DOM中event物件常用的屬性方法:

1.clientX；

2.clientY；

3.pageX；滑鼠指標相對於頁面的X座標；

4.pageY；滑鼠指標相對於頁面的Y座標；

5.StopPropagation:呼叫此方法可以阻止事件的進一步傳播(冒泡)；

6.target：觸發的事件元素/物件；

7.type：事件的名稱；

兩種event物件的相同點與不同點：

相同點：

1.取得事件類型；

2.取得鍵盤代碼(keydown/keyup事件)；

3.偵測Shift，Alt，Ctrl；

4.取得客戶區座標；

5.取得螢幕座標；

不同點：

1.取得目標；

//IE：var oTarget=oEvent.srcElement;

//DOM: var oTarget=oEvent.target;

2.取得字元碼；

//IE: var iCharCode=oEvent.keyCode;

//DOM: var iCharCode=oEvent.charCode;

3.阻止事件的預設行為；

//IE: oEvent.returnValue=false;

//DOM: oEvent.preventDefault;

4.終止冒泡：

//IE:oEvent.cancelBubble=true;

//DOM:oEvent.stopPropagation

事件類型：

一.老鼠事件：

onmouseover:當滑鼠移入時；

onmouseout:當滑鼠移出時；

onmousedown:按下滑鼠時；

onmouseup:當滑鼠抬起;

onclick:點選滑鼠左鍵時；

ondblclick：雙擊滑鼠左鍵時；

二.鍵盤事件：

onkeydown：當使用者在鍵盤上按下一個按鍵時發生；

onkeyup:當使用者釋放一個按下的鍵時發生；

keypress:當使用者一直按著鍵不放時；

三.HTML事件：

onload：載入頁面時；

onunload：卸載頁面時；

abort：當使用者終止裝載程序之前，如果他還沒有被完全轉載，發生abort事件

error：javascript發生錯誤時，產生的事件；

select：在一個input或textarea中，使用者選擇字元時，觸發的select事件

change：在一個input或textarea中，當它失去焦點，在select中觸發change事件

submit：當表單被提交時，觸發submit事件；

reset:重置

resize：當視窗或框架尺寸調整時觸發的事件；

scroll：當使用者捲動或有捲軸時觸發的事件；

focus：失去焦點時；

blur：獲得焦點時；

Javascript的事件模型

1.Javascript事件模型：1.冒泡類型: 當使用者點擊按鈕時：input-body-html-document-window（從下往上冒泡）IE瀏覽器只是用冒泡

    2.擷取類型: 當使用者點選按鈕時：window-document-html-body-input （從上往下）

經過ECMA標準化後，其他瀏覽器都支援兩種類型，捕獲先發生。

2.傳統事件書寫的三種方式：

1.

2.======<script>function name1(){alert('helloword!');}</script> //有名函數

3.  //匿名函式

複製程式碼 程式碼如下:

<script><br />  Var button1=document.getElementById("input1");<br />  button1.onclick=funtion(){<br />  alert('helloword!')<br />  }<br /> </script>

3.現代事件書寫方式：

複製程式碼 程式碼如下:

  //IE中新增事件

<script><br />  var fnclick(){<br />  alert("我被點擊了")<br />  }<br />  var Oinput=document.getElementById("input1");<br />  Oinput.attachEvent("onclick",fnclick);<br />  --------------------------------------<br />  Oinput.detachEvent("onclick",fnclick);//IE中刪除事件<br /> </script>

複製程式碼 程式碼如下:

  //DOM中新增事件

<script><br />  var fnclick(){<br />  alert("我被點擊了")<br />  }<br />  var Oinput=document.getElementById("input1");<br />  Oinput.addEventListener("onclick",fnclick,true);<br />  --------------------------------------<br />  Oinput.removeEventListener("onclick",fnclick);//DOM中刪除事件<br /> </script>

複製程式碼 程式碼如下:

//相容IE和DOM新增事件

<script><br />  var fnclick1=function(){alert("我被點擊了")}<br />  var fnclick2=function(){alert("我被點擊了")}<br />  var Oinput=document.getElementById("input1");<br />  if(document.attachEvent){<br />  Oinput.attachEvent("onclick",fnclick1)<br />  Oinput.attachEvent("onclick",fnclick2)<br />  }<br />  else(document.addEventListener){<br />  Oinput.addEventListener("click",fnclick1,true)<br />  Oinput.addEventListener("click",fnclick2,true)<br />  }<br /> </script>