您的位置:首页> 前端教程> JS教程
文章导航

JavaScript addEventListener()

2019-1-23 12:04| 作者: admin| 查看: 4750| 评论: 0|来自: 蚂蚁部落

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

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

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

(2).分解方法名称,以便加强理解与记忆。

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

(4).兼容低版本IE浏览器。

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

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

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

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

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

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<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方法注册事件监听器功能更加强大,后面会介绍。

JavaScript注册事件监听器的方式有很多,具体参阅JavaScript 注册事件处理函数一章节。

二.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).JavaScript 事件冒泡一章节。

(2).JavaScript 事件捕获一章节。

浏览器支持:

(1).IE9+浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).火狐浏览器支持此方法。

(5).opera浏览器支持此方法。

(6).safria浏览器支持此方法。

如果要解绑监听器可以参阅JavaScript removeEventListener()一章节。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<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.softwhy.com/" />
<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以下浏览器。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部