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>
點(diǎn)擊加載更多評(píng)論>>