LMSLogin
Position: Web system design > Wiki > Documents List > Document
第五組 javascript element 文件整理
by 張惟鈞, 2011-04-25 03:06, Views(1377)

目錄:

1.物件的操作

2.自行定義物件元素

3.什麼是事件

4.直接呼叫——事件處理函數之趣

5.this--事件處理函數之惑

6.IE事件模型

7.綁定和銷毀事件

 
 
 
1.物件的操作
 

javascript必須使用[new]關鍵字來對應到該物件instance,並宣告自己的reference變數,才可以透過這reference來使用該物件的各種功能或屬性

 

 

範例:

宣告一個物件reference(today),同時指定是一個日期物件

 

var today=new Date();

 

物件建立後,只要用[.]運算子,就可以直接使用該物件中的各種方法與屬性

 

today.getDate();

 

2.自行定義物件元素

 

建立自定物件的兩個步驟:

(1).寫一支建構函式來定義物件類型

(2).利用new關鍵字建立物件實體(object instance)

 

範例:

 

function member(name,sex){

this.name=name;

this.sex=sex;

}

這函式中的[this]字眼,是用來將傳入這個函式的兩個引數(argument)指定給物件的屬性之用

接下來用[new]建立幾個成員物件:

 

var papa = new member(“安安安”,”男生”);

var mama = new member(“安安”,”女生”);

 

接下來只要用papa.name就可取名字[安安安];利用mama.sex就可取出性別[女生]依此類推

 

 

3.什麼是事件

使用者對瀏覽器畫面所做的動作叫做[事件(event)]

這些事件,來偵測使用者的行為,當特定事件發生了就進行必要的處理

範例:

 

(1).abort:中止

(2).blur:失去焦點

(3).change:改變

 

4. 直接呼叫——事件處理函數之趣

<input  type =”submit” />

<script  language=”javascript” type=”text/javascript”>

var b = document.getElementsByTagName(“input”)[0];

b.onclick = function(){

    alert(this.tagName);

}

</script>

在上面的範例中,只有當按下按鈕時,才會觸發click事件,

並呼叫該事件處理函數。

現在,在程式碼片段的後面補加一行敘述:

setTimeout(“b.onclick()”,3000);

這時你會發現,即使不按一下按鈕,3秒鐘以後也會自動出現提示資訊。

也就是說3秒鐘之後,程式會自動呼叫事件處理函數。

 

5.this--事件處理函數之惑

This是最活耀的關鍵字,它的身份也是瞬息萬變的,例如,在下面的這行程式碼中,定義當按一下按鈕時改變目前按鈕的背景色(即顯示為紅色),其中this關鍵字就表示button按鈕物件:

<button  id =”btn” onclick=”this.style.background=’red’;”>按鈕</button>

很多時候this關鍵字可以與Event物件的srcElement屬性(IE模型下)或者target(DOM模型下)屬性值相同。但是,this並不是永遠都等於事件源,在一些特殊的環境中,this關鍵字並不指向目前事件物件。例如,在下面這個範例中,分別使用this關鍵字和事件源來指定目前物件的控制碼,但是很快你會發現,this並沒有指向目前的事件物件按鈕,而是指向Window物件,所以這個時候還繼續使用this關鍵字來參考目前物件就錯了:

 

 

 

<script  language =”javascript” type=”text/javascript”>

function btn1(){

      this.style.background = “red”;

}

function btn2(event){

      event = event || window.event;

      var  src =event.srcElement ? event.srcElement : event.target;

      src.syle.background = “red”;

}

</script>

<button  onclick=”btn1();”>按鈕 1</button>

<button  onclick=”btn2(event);”>按鈕 2</button>

 

6.IE事件模型

IE瀏覽器所提供的事件模型有別於基本事件模型和標準事件模型,它介於這兩者之間。IE事件模型也提供了Event物件,但是它僅作為Window物件的一個屬性使用。

事件屬性           說明

type : 獲得事件的類型,等同於標準中的type屬性

srcElement: 發生事件的元素,等同於標準中的target屬性

button: 表示按下滑鼠件的狀態,這與標準事件模型中的button屬性功能            相同,但是屬性值的含義不同。

clientXclientY: 宣告事件發生時滑鼠指標相對於用戶端區域瀏覽器視窗左上角的x軸和y軸座標值,等同於標準中的同名屬性。

altKeyctrlKeyShiftKey: 表示在宣告滑鼠事件時,是否按下了【Alt】【Ctrl】【Shift】,等同於標準中的同名屬性,但是沒有metaKey屬性。

offsetXoffsetY: 宣告事件發生時滑鼠指標相對於原元素左上角的x軸和y軸座標值。標準事件模型中沒有提供相同功能的屬性。

keyCode: 宣告keydownkeyup事件的鍵程式碼,以及keypress事件的Unicode字元。可以借助String.fromCharCode()方法將這些解碼轉換為字元。

fromElementtoElement: 分別宣告滑鼠移動過的元素和滑鼠將要移動到的元素等同於標準事件模型中的relatedTarget屬性。

cancelBubble: true可以阻止事件反昇,預設為flase,等同於標準事件模型中的stopPropagation()方法。可讀寫的屬性。

returnValue: flase可以阻止事件的預設動作,預設為true,等同於標準事件模型中的preventDefault()方法。可讀寫的屬性。

 

7.綁定和銷毀事件

IE瀏覽器中,每個元素和Window物件都包含有兩個方法:attachEvent()detachEvent()。它們與DOM2級標準事件模型的addEventListener()removeEventListener()方法功能相同,但是attachEvent()detachEvent()方法不支援事件捕捉,所以它們的參數只有兩個。

 

(一)榜定事件

attachEvent()方法用來註冊事件,即給指定物件的事件附加事件處理函數,它包含兩個參數:事件處理函數的名稱(onclick)和事件回呼函數或參考。例如:

<p id=”p”>IE事件註冊</p>

<script  language=”javascript”  type=”text/javascript”>

var  p = document.getElementById(“p”);

p.attachEvent(“onclick”, function(){

          alert(“p”);

});

</script>

 

(二)銷毀事件

detachEvent()方法用來登出事件,即將事件處理函數從指定物件中分離出來,具體低說就是使用detachEvent()方法在事件處理函數清單中尋找指定的函數,並移除它。該方法也包含兩個參數:事件處理函數的名稱(onclick)和事件回呼函數的參考。例如:

<p  id=”p”>IE事件註冊</p>

<script  language=”javascript”  type=”text/javascript”>

var p = document.getElementById(“p”);

p.attachEvent(“onclick”,f);

p.detachEvent(“onclick”,f);

function  f(){

      alert(“p”);

}

</script>