JavaScript跨浏览器事件处理

JavaScript跨浏览器事件处理

作者: xiaomonk 发表时间: 2013-05-23 12:45 | 151次阅读 | 参与评论（1）

分享：

如果您正在使用jQuery,你可以很容易地使用.bind()和.unbind(),或.on()和.off(),安装/拆除DOM元素的事件处理程序。但有些时候由于各种原因jQuery在项目中是不可用的/不理想的。

其实，原生JavaScript很容易做到，不需要任何类库。大多数浏览器使用addEventListener和removeEventListener为元素注册特别的侦听。但IE8及以下使用的不同的API(attachEvent/detachEvent).很容易就能写一个简单的跨浏览器事件处理脚本。

var EventHandler = {
        bind:function(el, ev, fn){
                if(window.addEventListener){ // 现在浏览器包括 IE9+
                        el.addEventListener(ev, fn, false);
                } else if(window.attachEvent) { // IE8 及以下
                        el.attachEvent('on' + ev, fn);
                } else {
                        el['on' + ev] = fn;
                }
        },

        unbind:function(el, ev, fn){
                if(window.removeEventListener){
                        el.removeEventListener(ev, fn, false);
                } else if(window.detachEvent) {
                        el.detachEvent('on' + ev, fn);
                } else {
                        elem['on' + ev] = null; 
                }
        },

        stop:function(ev) {
                var e = ev || window.event;
                e.cancelBubble = true;
                if (e.stopPropagation) e.stopPropagation();
        }
}

 

上面的代码还处理IE8（或以下）和其他浏览器stopPropagation的区别。IE8及以下需要使用“cancelBubble”属性停止事件传播。

原文链接：JavaScript跨浏览器事件处理