JavaScript addEventListener()

红太狼 2020-05-27 12:34 486阅读 0赞

# JavaScript addEventListener()

addEventListener方法可以为事件注册监听器，也就是注册事件处理函数。

本文将解决如下三个问题：

（1）.为什么要注册事件监听器（事件处理函数）。

（2）.分解方法名称，以便加强理解与记忆。

（3）.通过代码实例演示此方法的具体应用方法。

（4）.兼容低版本IE浏览器。

**一.为什么要注册事件监听器：**

默认状态下，当我们点击普通按钮的时候，并没有什么特别的反应。

这时候，不少朋友会想当然的认为"点击事件没有触发"，这是完全错误的认识。

只要点击元素，事件就会触发，之所以没有特别反应，是因为没有为此事件注册监听器。

通过事件监听器，我们可以对事件给予响应，比如点击按钮设置div元素的背景色。

代码实例如下：

```html
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.dandelioncloud.cn/" /> 
<title>蒲公英云</title>
<style>
#ant{
  width: 100px;
  height: 50px;
  background-color: #ccc;
}
</style>
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.style.backgroundColor="blue";
  }
}  
</script>  
</head>
<body>
<div id="ant"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>
```

点击按钮可以将div的背景颜色设置为蓝色，上述代码通过句柄方式元素事件注册监听器（事件处理函数）。

本文的主角addEventListener方法注册事件监听器功能更加强大，后面会介绍。

**二.addEventListener方法分解：**

名称通常与其功能密切相关，尽可能做到名副其实，addEventListener由如下三个单词合成：

（1）.add：具有"添加"的意思。

（2）.event：具有"事件"的意思。

（3）.listener：具有"监听者"或者"倾听者"的意思。

是不是经过分解之后，对于此方法的理解和记忆会有一些小的帮助。

**三.addEventListener具体用法：**

下面具体介绍一下此方法的如何为元素指定事件注册监听器。

语法结构：

```javascript
target.addEventListener(type, listener, useCapture)
```

参数解析：

（1）.type：必需，事件的类型，比如"click"或者"mouseover"等，不能加"on"，"onclick"是错误的。

（2）.listener：必需，监听器，也就是事件处理函数。

（3）.useCapture：必需，布尔值，规定监听事件阶段，true表示事件捕获阶段，false表示事件冒泡阶段。

**浏览器支持：**

（1）.IE9+浏览器支持此方法。

（2）.edge浏览器支持此方法。

（3）.谷歌浏览器支持此方法。

（4）.火狐浏览器支持此方法。

（5）.opera浏览器支持此方法。

（6）.safria浏览器支持此方法。

**代码实例：**

```html
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.dandelioncloud.cn/" /> 
<title>蒲公英云</title>
<style>
#ant{
  width: 100px;
  height: 50px;
  background-color: #ccc;
}
</style>
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.addEventListener("click",function(){
    odiv.style.backgroundColor="blue";
  },false);
}  
</script>  
</head>
<body>
<div id="ant"></div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>
```

上面代码使用addEventListener方法为按钮注册click事件监听器（事件处理函数）。

非常的简单，有如下几点再强调一下：

（1）.事件类型前面不能加"on"，写成"onclick"是错误的。

（2）.第三个参数值通常是false，也就是事件监听器监听事件传播的阶段。

下面演示一下事件捕获阶段和事件冒泡阶段的不同，代码实例如下：

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
#box{
  width:400px;
  height:300px;
  background-color:blue;
}
#middle{
  width:300px;
  height:200px;
  background-color:green;
}
#inner{
  width:200px;
  height:150px;
  background-color:red;
}
</style>
<script>
window.onload=function(){
  let obox=document.getElementById("box");
  let omiddle=document.getElementById("middle");
  let oinner=document.getElementById("inner");
      
  obox.addEventListener("click",function(){
    alert("box")
  },true);
 
  omiddle.addEventListener("click",function(){
    alert("middle")
  },true);
 
  oinner.addEventListener("click",function(){
    alert("inner")
  },true);
}
</script>
</head>
<body>
<div id="box">
  <div id="middle">
    <div id="inner"></div>
  </div>
</div>
</body>
</html>
```

代码分析如下：

（1）.方法的第三个参数为true，说明事件在捕获阶段会被监听器侦听到。

（2）.现在点击最内层div，如果是监听的冒泡阶段，那么会依次弹出inner、middle和box。

（3）.然而真正的弹出顺序是box、middle和inner，足以说明第三个参数的作用。

大家可以将最后一个参数改为false，再比对一下效果。

**四.兼容低版本IE浏览器：**

IE9以下浏览器并不支持addEventListener方法，但是支持attachEvent方法。

语法结构：

```javascript
target.attachEvent(type, listener)
```

参数解释:

（1）.type：事件类型，比如click事件、mouseover事件等，但是前面要加"on"。

（2）.listener：事件监听器，也就是事件处理函数。有如下三点需要特别注意：

（1）.此方法不符合W3C标准。

（2）.事件类型前面要加"on"。

（3）.this不指向注册时间处理函数的对象。

代码封装如下：

```javascript
function(element,type,handler){      
  if(element.addEventListener){        
    element.addEventListener(type,handler,false);      
  } 
  else if(element.attachEvent){        
    element.attachEvent("on" + type, handler);      
  } 
  else{        
    element["on"+type]=handler;      
  }    
}
```

上面代码可以兼容到IE9以下浏览器。