JavaScript 注册事件

■知识点

在DOM事件模型中，通过调用对象的addEventListener()方法注册事件。用法如下：

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

参数说明如下。

    type：注册事件的类型名。事件类型名没有on前缀。

    listener：事件监听函数。默认传递给它的唯一参数是event对象。

    useCapture：布尔值。当它为true时，则在捕获阶段触发；当它为false时，则在冒泡阶段触发。

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

    element.attachEvent(etype,eventName)

参数说明如下。

    etype：注册事件的类型，如onclick、onkeyup、onmousemove 等。

    eventName：事件监听函数。

■实例设计

【示例1】在下面的示例中，使用addEventListener()方法为所有按钮注册click事件。先调用document的getElementsByTagName()方法捕获所有按钮对象，然后使用for in语句遍历按钮集（btn)和addEventListener()方法分别为每一个按钮注册一个事件函数，该函数获取当前对象所显示的文本。

<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);     //为每个按钮对象注册一个事件监听函数，定义在捕获阶段进行响应

}

</script>

【示例2】在下面的示例中，为段落文本注册两个事件：mouseover和mouseout。当光标移到段落文本上面时会显示为蓝色背景，而当光标移出段落文本时会自动显示为红色背景。

<p id="p1">为对象注册多个事件</p>

<script>

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

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

    this.style.background = 'blue';

}, true);                                         //为段落元素注册第1个事件监听函数

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

    this.style.background = 'red';

}, true);                                         //为段落元素注册第2个事件监听函数

</script>