JavaScript 注冊事件

■知識點

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

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

參數(shù)說明如下。

    type：注冊事件的類型名。事件類型名沒有on前綴。

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

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

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

    element.attachEvent(etype,eventName)

參數(shù)說明如下。

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

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

■實例設(shè)計

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

<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);     //為每個按鈕對象注冊一個事件監(jiān)聽函數(shù)，定義在捕獲階段進行響應

}

</script>

【示例2】在下面的示例中，為段落文本注冊兩個事件：mouseover和mouseout。當光標移到段落文本上面時會顯示為藍色背景，而當光標移出段落文本時會自動顯示為紅色背景。

<p id="p1">為對象注冊多個事件</p>

<script>

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

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

    this.style.background = 'blue';

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

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

    this.style.background = 'red';

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

</script>