addEventListener之handleEvent

转载 2016年05月30日 09:48:36

addEventListener() 方法是将指定的事件监听器注册到目标对象上,当该对象触发指定的事件时,指定的回调函数就会被执行。

语法:

element.addEventListener(type, listener[, useCapture]);
其中listener: 当指定的事件类型发生时被通知到的一个对象。该参数必是实现EventListener接口的一个对象或函数。

即,第二个参数除了可以传入函数外,还可以传入对象。

那么实现 EventListener 接口的对象有什么特征呢?

// 注意:该接口属于DOM2, 所以IE6~IE8不能直接使用哦~

interface EventListener {

void  handleEvent (Event evt);

};

也就是说事件会自动在传入对象中寻找handleEvent方法。

这样做的 好处之一 

1 var obj = {
2     name: 'foo',
3     handleEvent: function() {
4        alert('click name='+ this.name);
5     }
6 };
7 document.body.addEventListener('click', obj, false);

这样,在 element 触发event事件后,调用的是handleEvent 方法,且其中的 this 是指实现EventListener接口的对象,这里指向obj对象。而普通的函数中的this 指向事件源:

1 document.body.addEventListener('click', function() {
2    console.log(this == document.body); // output: true
3 }, false);

好处之二 :

 1 var obj = {
 2     name: 'foo',
 3     handleEvent: function() {
 4        alert('click name='+ this.name);
 5     }
 6 };
 7  
 8 document.body.addEventListener('click', obj, false);
 9  
10 function changeHandler() {
11  obj.handleEvent = function() {
12     alert("change the click handle!");
13  };
14 }
15  
16 // 5秒后动态改变事件处理函数
17 setTimeout(function() {
18    changeHandler();
19 }, 5000);

这样就可以动态切换绑定事件的处理函数,而不需要remove之前的事件。

总结:

使用这种绑定对象的方式,而不是和具体的函数耦合,更有面向对象的感觉了,呵呵。

有理解错误的地方,还望大家多多指教~

addEventListener()与handleEvent()

MDN: 点击打开链接 方法声明 void handleEvent(in Event event); 方法 handleEvent() 当EventListener 所注册的事件发生...
  • qq_14954259
  • qq_14954259
  • 2016年12月18日 13:58
  • 126

addEventListener与handleEvent

1 . addEventListener方法用于给指定元素添加事件监听器// 第二个参数function是指定要事件触发时执行的函数 element.addEventListener(event, ...
  • u010844736
  • u010844736
  • 2017年09月06日 10:45
  • 137

关于 addEventListener 和 handleEvent 方法

使用 addEventListener 可以绑定事件,并传入回调函数。 Mozilla 0.9.1 和 Netscape 6.1 之后的版本不但支持传递函数引用,也都允许直接把拥有 handleEv...
  • u011872945
  • u011872945
  • 2014年06月25日 18:56
  • 912

addEventListener第二个参数的handleEvent

昨天无意中看到一篇老外的文章,文章提到了addEventListener第二个参数可以传入object,并且对象中handleEvent为事件处理函数。例如下面的javascript代码: ...
  • load_life
  • load_life
  • 2012年03月21日 22:29
  • 481

使用handleEvent()方法,action()方法和mouseDown()方法处理事件的JAVA Application程序.

程序:import java.awt.*;public class deal    //定义主类deal{    public static void main(String args[])    /...
  • liuh520
  • liuh520
  • 2006年07月27日 12:00
  • 5296

HandleEvent

import javax.swing.*; import java.awt.event.*; public class HandleEvent extends JFrame {     pu...
  • u014757261
  • u014757261
  • 2014年05月10日 01:10
  • 421

javascript事件绑定addEventListener

1,w3c的标准是addEventListener,如event.addEventListener(
  • zlianjie
  • zlianjie
  • 2014年06月19日 14:50
  • 3551

addEventListener和on的区别

为什么需要addEventListener? 先来看一个片段: html代码 放逐的天空 用on的代码 window.onload = function(){ v...
  • yongxiaokang1
  • yongxiaokang1
  • 2016年07月13日 21:06
  • 2583

addEventListener详解

addEventListener是一个侦听事件并处理相应的函数。 原型:     public override function addEventListener(type:String...
  • zqjflash
  • zqjflash
  • 2014年03月06日 11:40
  • 1550

js委托事件-addEventListeners(冒泡方向)

JQuery中live()、delegate()、on()事件都能给新增元素绑定事件,原理就是用了事件委托。 实例: 给id为div的元素绑定一个click委托,如果冒泡上来的元素是P元素就会执行al...
  • qq_26744901
  • qq_26744901
  • 2016年06月17日 23:10
  • 2502
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:addEventListener之handleEvent
举报原因:
原因补充:

(最多只允许输入30个字)