addEventListener第二个参数的handleEvent

转载 2012年03月21日 22:29:29

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

var obj = {
	handleEvent: function() {
		alert('body clicked');
	}
};
document.body.addEventListener('click',obj,false);

测试发现这段代码在IE9+,chrome,FF,opera等浏览器是正确的(测试范围可能不够宽),而且可以成功的绑定click事件。在Qwrap群里一问才知道是DOM2中接口,很有意思的一个发现,@貘大大 也发微博说自己先入为主了,我相信很多人跟@貘大大 一样都先入为主了。

addEventListener的handleEvent应用

发现了这个“新大陆”有什么用法呢?哈哈~首先想到的是对象引用。看下面的javascript代码:

<script type="text/javascript">
var obj = {
handleEvent: function() {
	alert('body clicked');
}
};
document.body.addEventListener('click',obj,false);
function fn2(){
	obj.handleEvent = function(){
		alert('fn2');
	};
}
</script>
<button onclick="fn2();">change</button>

因为对象的引用关系,点击下button就可以切换绑定事件的处理函数,而不需要remove之前的事件,然后重新绑定一个新的处理函数。

如果你觉得这个不够炫,那么下面的javascript代码可能就更有吸引力了哦~

var obj2 = {
	addEvent:function(el){
		el.addEventListener('click',this,false);
	},
	handleEvent:function(e){
		alert(e.target);
	}
};
obj2.addEvent(document.body);

addEventListener handleEvent缺点

显而易见,IE6~IE8不能使用……可是如果是高级浏览器还是不错的功能哦~

扩展阅读

http://peter.michaux.ca/articles/our-backwards-dom-event-libraries
http://ajaxian.com/archives/an-alternative-way-to-addeventlistener

相关文章推荐

addEventListener()与handleEvent()

MDN: 点击打开链接 方法声明 void handleEvent(in Event event); 方法 handleEvent() 当EventListener 所注册的事件发生...

as3 addEventListener各参数详解

public function addEventListener(                   ...

addEventListener的第三個參數

W3C DOM裡用來新增觸發事件的函數叫AddEventListener,不過我一直不知道這個函數的第三個參數是要做什麼用的,總是隨便設,也沒發現差異再哪,前兩天看ppk on javascrip...

As3 addEventListener事件监听传递参数

原文地址:http://blog.chengdu.cn/space.php?uid=85625&do=blog&id=41823 As3 addEventListener事件监听传递参数 var ...

Flex addEventListener 添加事件时 传递参数并移除它

我们知道FLEX添加监听事件,会经常使用到,但是常见的方法,并不能自定义参数。我收集到一个非常好的方法。可以在监听的时候,添加自己喜欢的参数。好吧,我们开始第一个 <s:Application...
  • HPhone
  • HPhone
  • 2011-11-18 18:00
  • 4309

addEventListener(type, fn , true/false)绑定事件第三个参数作用以及利用事件的冒泡,实现事件委托

addEventListener( type , fn , true/false )

转:Flash as3 addEventListener事件监听传递参数

原文地址:http://blog.chengdu.cn/space.php?uid=85625&do=blog&id=41823As3 addEventListener事件监听传递参数var sayH...

flex4 actionScript3.0 addEventListener的各个参数介绍

估计不少人都没用过addEventListener()方法的参数,我就是其中一个。 public function addEventListener(type:String, listener:Fu...

html学习 - javascript事件监听以及addEventListener参数分析

事件监听 在Javascript中事件的监听是用来对某些操作做出反应的方法。例如监听一个按钮的pressdown, 或者获取鼠标左键按下时候鼠标的位置。这些都需要使用监听来完成。监听的函数很简单:a...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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