关于 addEventListener 和 handleEvent 方法

标签: 前端 addEventListener handleEvent JavaScript | 发表时间:2012-07-09 11:03 | 作者:芒果
出处:http://www.mangguo.org

使用 addEventListener 可以绑定事件,并传入回调函数。

Mozilla 0.9.1 和 Netscape 6.1 之后的版本不但支持传递函数引用,也都允许直接把拥有 handleEvent 方法的对象作为 addEventListener 方法的第二参数。

这在 DOM Level 2 的接口定义中也已经做了说明:

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener

利用这个特性可以把任意对象注册为事件处理程序,只要它拥有 handleEvent 方法。

var o = {
    handleEvent : function () {
        alert('handleEvent executed');
    }
};
element.addEventListener('click', o, false);

当定义对象封装的时候,可以直接将 this 指针传入:

var o = {
    bind : function () {
        element.addEventListener('click', this, false);
    },
    handleEvent : function () {
        alert('handleEvent executed');
    }
};

IE9 是 IE 家族中第一个支持 addEventListener + handleEvent 的浏览器,IE9 之前的版本连 addEventListener 也没能支持。需要通过属性探测解决兼容问题:

function on(el, ev, fn, bubble) {
    if(el.addEventListener) {
        try {
            el.addEventListener(ev, fn, bubble);
        }
        // 黑莓等系统不支持 handleEvent 方法
        catch(e) {
            if(typeof fn == 'object' && fn.handleEvent) {
                el.addEventListener(ev, function(e){
                    //以第一参数为事件对象
                    fn.handleEvent.call(fn, e);
                }, bubble);
            } else {
                throw e;
            }
        }
    } else if(el.attachEvent) {
        // 检测参数是否拥有 handleEvent 方法
        if(typeof fn == 'object' && fn.handleEvent) {
            el.attachEvent('on' + ev, function(){
                fn.handleEvent.call(fn);
            });
        } else {
            el.attachEvent('on' + ev, fn);
        }
    }
}

完。

参考资料:

http://www.thecssninja.com/javascript/handleevent

http://topic.csdn.net/t/20040628/14/3128262.html

推荐阅读


© 2010 芒果小站 | 固定链接 | 没有评论 | 标签 , ,

相关 [addeventlistener handleevent 方法] 推荐:

关于 addEventListener 和 handleEvent 方法

- - 芒果小站
使用 addEventListener 可以绑定事件,并传入回调函数. Mozilla 0.9.1 和 Netscape 6.1 之后的版本不但支持传递函数引用,也都允许直接把拥有 handleEvent 方法的对象作为 addEventListener 方法的第二参数. 这在 DOM Level 2 的接口定义中也已经做了说明:.

模板方法

- - 博客园_首页
由于前两天刚好用到模板方法这个模式,而且这个模式相对来 比较简单实用,就写写个人的一些认知吧. 大家对宋丹丹和赵本山的小品里有一个很经典的台词一定不会陌生,而且还日常中经常引用:. 《钟点工》中宋丹丹问要把大象装冰箱,总共分几步. 赵本山就懵了,大象那么大,冰箱那么小,怎么才能把大象装冰箱里呢. 答案也很经典:三步:第1步,把冰箱门打开;第2步,把大象装进去;第3步,把冰箱门带上.

详解 equals() 方法和 hashCode() 方法

- - ImportNew
Java的基类Object提供了一些方法,其中equals()方法用于判断两个对象是否相等,hashCode()方法用于计算对象的哈希码. equals()和hashCode()都不是final方法,都可以被重写(overwrite). 本文介绍了2种方法在使用和重写时,一些需要注意的问题. Object类中equals()方法实现如下:.

mysql优化方法

- - 数据库 - ITeye博客
通过show status和应用特点了解各种SQL的执行频率. 通过SHOW STATUS可以提供服务器状态信息,也可以使用mysqladmin extended-status命令获得. SHOW STATUS可以根据需要显示session级别的统计结果和global级别的统计结果. 以下几个参数对Myisam和Innodb存储引擎都计数:.

WinDump使用方法

- - 研发管理 - ITeye博客
Windump是Windows环境下一款经典的网络协议分析软件,其Unix版本名称为Tcpdump. 它可以捕捉网络上两台电脑之间所有的数据包,供网络管理员/入侵分析员做进一步流量分析和入侵检测. 在这种监视状态下,任何两台电脑之间都没有秘密可言,所有的流量、所有的数据都逃不过你的眼睛(当然加密的数据不在讨论范畴之内,而且,对数据包分析的结果依赖于你的TCP/IP知识和经验,不同水平的人得出的结果可能会大相径庭).

下载Flickr图片方法

- wind - 让PPT设计NEW一NEW
        众所周知,Flickr是全球最大的在线图片分享网站,也是最早涉足web2.0的网站之一. 网站上面有很多非常漂亮的图片,这为那些“图片控”、“下载控”提供了一个非常好的途径. 可惜啊可惜,可惜的是,Flickr网站并非允许所有图片可以下载.         前几天,有个网友发微博私信给我,问我如何下载Flickr图片.

放手的7种方法

- imacee - 译言-每日精品译文推荐
来源Seven Ways to Let Go. 前言:学会放手是一门人生哲学,无端的执着总是给生活带来不快乐. 当人们总是在抱怨放下太难的时候,是不是可以从自身上寻找一些可以改进的地方呢. 下面让我们来探讨几条小建议吧,仅供参考. 一、拓宽自己的世界观并舍弃一些习惯. 学会放开,就要拒绝执行要求自己事事完美的命令,不要总是要求自己达到某个目标,取悦他人.

止咳的天然方法

- Jerrfey - 译言-每日精品译文推荐
来源Natural Ways to Suppress a Cough. 在你伸手拿咳嗽糖浆之前,试试这些天然疗法的其中之一吧. To make a tea, mix 2 teaspoons crushed leaves in 1 cup boiling water, cover, then steep for 10 minutes and strain..

雷军的方法论

- Leo - 《商业价值》杂志
雷军做小米的过程,实际上就是将他从金山和做天使投资人时所积累的方法论,付诸实践的过程. 1992年,雷军加入金山软件,任北京开发部总经理;1998年,雷军担任金山软件CEO;1999年,金山软件筹备上市;2007年,金山软件上市; 2个月后,雷军宣布离职. 这是雷军从23岁到38岁最重要的人生一页.

Doclist压缩方法简介

- flychen50 - 搜索技术博客-淘宝
本文是作者在学习doclist压缩时的一点总结,希望以尽可能简单明了的方式描述各个算法的思想和适用场景,帮助同学们理解和比较. 本文并不涉及具体的算法实现,代码请大家自行google. 这里需要强调的是“所谓的改进顺序”只是作者yy出来方便理解记忆,并不反应真实的压缩方法发展历程. 倒排表的基本组成部分,看例子:.