关闭

addEventListener第二个参数的handleEvent

372人阅读 评论(0) 收藏 举报

昨天无意中看到一篇老外的文章,文章提到了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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:903825次
    • 积分:10600
    • 等级:
    • 排名:第1540名
    • 原创:92篇
    • 转载:1171篇
    • 译文:11篇
    • 评论:28条
    最新评论