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 所注册的事件发生...

Vuejs中使用addEventListener的事件触发执行函数的this

addEventListener => this
  • nzyalj
  • nzyalj
  • 2017年04月24日 09:06
  • 2937

细说addEventListener与事件捕获、事件冒泡

这篇文章详细介绍了addEventListener绑定事件的细节以及事件冒泡和事件捕获的有关知识。作者以生动形象的例子和简单直白的语言,让读者能够快速了解和掌握JS中事件绑定和事件传播的规则和本质。...
  • Hukaihe
  • Hukaihe
  • 2016年06月28日 23:20
  • 13692

addEventListener/attachEvent兼容IE浏览器与标准浏览器

标用准浏览器中可以使addEventListener()函数来给DOM元素绑定事件,使用removeEventListener()函数移除事件绑定,而IE6 IE7 IE8不支持addEventLi...

Js添加事件addEventListener和attachEvent

给对象增加一个事件,可以用上文的方法,当然也可以用addEventListener和attachEvent。 两者有一个区别: addEventListener和attachEvent能够给对象增加多...

attachEvent 与addEventListener到底有什么区别呢

http://www.cnblogs.com/lidabo/archive/2012/04/01/2429128.html attachEvent 与addEventList...

addEventListener

addEventListener-开始   前面零散地写了些关于 addEventListener 的内容,觉得比较散,有些地方可能也说得不够清楚明白,所以决定以连载的形式从头到尾再写一篇...
  • lifj07
  • lifj07
  • 2012年01月30日 16:14
  • 460

as3 addEventListener各参数详解

public function addEventListener(                             type:String,    //动作类型                ...
  • neaudiy
  • neaudiy
  • 2011年03月10日 15:27
  • 5619

Cordova插件开发之自定义消息事件addEventListener,fireWindowEvent

关于在cordova的插件开发的做定义消息的功能没有官方的介绍文章,但是官方有一个这样的例子,就是电源状态插件。我们通过学习这个插件的编写来学习自定义消息。 这个插件的地址为:https://git...

js 添加事件 attachEvent(IE) 和 addEventListener(W3C) 的用法

一般我们在JS中添加事件,是这样子的   1 obj.onclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:addEventListener之handleEvent
举报原因:
原因补充:

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