JS addEventListener和attachEvent用法对比与注册事件教程

在 JavaScript 的 DOM 事件模型中，可以通过调用对象的 addEventListener() 方法来注册事件。具体用法如下： element.addEventListener(String type, Function listener, boolean useCaptrue);

各参数的具体含义说明如下：

type：表示注册事件的类型名称。需要注意的是，事件类型名与事件属性名不同，前者不包含 on 前缀。例如，对应事件属性 onclick 的事件类型名为 click。
listener：指监听函数，也就是事件处理函数。当指定类型的事件发生时，系统将调用该函数。在调用此函数时，默认会传递一个唯一的参数，即 event 对象。
useCaptrue：这是一个布尔值参数。若设置为 true，指定的事件处理函数将在事件传播的捕获阶段触发；若设置为 false，则事件处理函数将在冒泡阶段触发。

示例1

以下示例演示如何使用 addEventListener() 为所有按钮注册 click 事件。首先，调用 document 的 getElementsByTagName() 方法获取所有按钮对象；接着，使用 for 语句遍历按钮集合（btn），并分别对每个按钮调用 addEventListener() 方法注册事件函数，从而获取当前对象所显示的文本内容。


<button id="btn1" onclick="btn1();">按 钮 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>

在浏览器中预览页面，单击不同的按钮，浏览器会自动弹出显示按钮名称的提示框。效果如图所示：

示例1

使用 addEventListener() 方法不仅能够为多个对象注册相同的事件处理函数，还可以为同一个对象注册多个不同的事件处理函数。这种为同一对象注册多个处理函数的机制，对于模块化开发具有非常重要的实用价值。

示例2

在下面的示例中，我们为段落文本注册了两个事件：mouseover 和 mouseout。当光标移动到段落文本上方时，背景色会变为蓝色；当光标移出段落文本时，背景色会自动变为红色。这种方式无需破坏文档结构即可为段落文本添加多个事件属性。


<p id="p1">为对象注册多个事件</p>
<script>
  var p1 = document.getElementById("p1"); //捕获段落元素的句柄
  p1.addEventListener("mouseover", function () {
    this.style.background = 'blue';
  }, true); //为段落元素注册第1个事件处理函数
  p1.addEventListener("mouseout", function () {
    this.style.background = 'blue';
  }, true); //为段落元素注册第2个事件处理函数
</script>

IE 事件模型则使用 attachEvent() 方法来注册事件。其用法如下：


element.attachEvent(etype, eventName)

参数列表说明如下：

etype：用于设置事件类型，例如 onclick、onkeyup、onmousemove 等。
eventName：用于设置事件名称，即实际的事件处理函数。

示例3

在下面的示例中，我们为段落标签 <p> 注册了两个事件：mouseover 和 mouseout。设计逻辑为：当光标经过时，段落文本背景色显示为蓝色；当光标移开后，背景色显示为红色。


<p id="p1">为对象注册多个事件</p>
<script>
  var p1 = document.getElementById("p1"); //捕获段落元素
  p1.attachEvent("onmouseover", function () {
    this.style.background = 'blue';
  }); //注册mouseover事件
  p1.attachEvent("onmouseout", function () {
    this.style.background = 'red';
  }); //注册mouseout事件
</script>

使用 attachEvent() 注册事件时，其事件处理函数的调用对象不再是当前事件对象本身，而是 window 对象。因此，在事件函数中，this 关键字指向 window 而非当前对象。如果需要获取当前触发事件的元素对象，应当使用 event 对象的 srcElement 属性。

IE 事件模型中的 attachEvent() 方法，其第 1 个参数为事件类型名称，必须加上 on 前缀；而使用 addEventListener() 方法时，则不需要这个 on 前缀，例如直接使用 click。

到此这篇关于JS addEventListener()和attachEvent()方法实现注册事件的文章就介绍到这了,更多相关JS addEventListener()和attachEvent()内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

JavaScript中addEventListener与attachEvent事件注册详解

示例1

示例2

示例3

实用工具推荐