JavaScript 注冊(cè)事件

■知識(shí)點(diǎn)

在DOM事件模型中，通過(guò)調(diào)用對(duì)象的addEventListener()方法注冊(cè)事件。用法如下：

    element.addEventListener(String type, Function listener, boolean useCapture);

參數(shù)說(shuō)明如下。

    type：注冊(cè)事件的類型名。事件類型名沒(méi)有on前綴。

    listener：事件監(jiān)聽(tīng)函數(shù)。默認(rèn)傳遞給它的唯一參數(shù)是event對(duì)象。

    useCapture：布爾值。當(dāng)它為true時(shí)，則在捕獲階段觸發(fā)；當(dāng)它為false時(shí)，則在冒泡階段觸發(fā)。

在IE事件模型中，使用attachEvent()方法注冊(cè)事件。用法如下：

    element.attachEvent(etype,eventName)

參數(shù)說(shuō)明如下。

    etype：注冊(cè)事件的類型，如onclick、onkeyup、onmousemove 等。

    eventName：事件監(jiān)聽(tīng)函數(shù)。

■實(shí)例設(shè)計(jì)

【示例1】在下面的示例中，使用addEventListener()方法為所有按鈕注冊(cè)click事件。先調(diào)用document的getElementsByTagName()方法捕獲所有按鈕對(duì)象，然后使用for in語(yǔ)句遍歷按鈕集（btn)和addEventListener()方法分別為每一個(gè)按鈕注冊(cè)一個(gè)事件函數(shù)，該函數(shù)獲取當(dāng)前對(duì)象所顯示的文本。

<button id="btnl" onclick="btnl ();">按鈕 1</button> 

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

<script>

var btn = document.getElementsByTagName ("button"）；//捕獲所有按鈕 

for(var i in btn) {                              //遍歷按鈕集合

    btn[i].addEventListener("click", function (){ 

    alert(this.innerHTML);

    }, true);     //為每個(gè)按鈕對(duì)象注冊(cè)一個(gè)事件監(jiān)聽(tīng)函數(shù)，定義在捕獲階段進(jìn)行響應(yīng)

}

</script>

【示例2】在下面的示例中，為段落文本注冊(cè)兩個(gè)事件：mouseover和mouseout。當(dāng)光標(biāo)移到段落文本上面時(shí)會(huì)顯示為藍(lán)色背景，而當(dāng)光標(biāo)移出段落文本時(shí)會(huì)自動(dòng)顯示為紅色背景。

<p id="p1">為對(duì)象注冊(cè)多個(gè)事件</p>

<script>

var p1 = document.getElementById("pl");           //捕獲段落元素的句柄

p1.addEventListener("mouseover”, function (){ 

    this.style.background = 'blue';

}, true);                                         //為段落元素注冊(cè)第1個(gè)事件監(jiān)聽(tīng)函數(shù)

p1.addEventListener("mouseout"，function(){ 

    this.style.background = 'red';

}, true);                                         //為段落元素注冊(cè)第2個(gè)事件監(jiān)聽(tīng)函數(shù)

</script>