美文网首页
跨浏览器的事件处理程序

跨浏览器的事件处理程序

作者: 小囧兔 | 来源:发表于2017-06-10 15:54 被阅读0次

事件处理程序有DOM0级事件处理程序、DOM2级事件处理程序,IE事件处理程序,DOM0级事件处理程序具有简单,跨浏览器的优势。DOM2级事件定义了两个方法:addEventListener()和removeEventListener()这两个方法用于指定和删除事件处理程序,IE也有两个方法:attachEvent()和detachEvent(),由于IE8和更早的版本只支持事件冒泡,所以通过这两个方法只能添加到冒泡阶段,为了使事件处理程序可以在大多数浏览器正常的运行,只要关注冒泡阶段即可。所以我们要写一个方法,让它根据情况使用DOM0级方法,DOM2级方法或者IE方法添加事件:

function addEvent(e,type,handler){
        if(e.addEventListener){
            e.addEventListener(type,handler,false);
        }else if(e.attachEvent){
            e.attachEvent("on"+type,handler);
        }else{
            e["on"+type]=handler;
        }
    }

可以这样使用:
addEvent(btn,'’click',handler);

与addEvent()对应的移除事件的方法是removeEvent(),无论该事件用什么方法添加到元素中,如果其他方法无效,就采用DOM0级的方法移除。

function removeEvent(e,type,handler){
           if(e.removeEventListener){
               e.removeEventListener(type,handler,false);
           }else if(e.detachEvent){
               e.detachEvent("on"+type,handler);
           }else {
               e["on"+type]=null;
           }
    }

这两个方法首先都判断是否存在DOM2级的方法,如果存在就使用该方法传入事件类型,事件处理程序,和第三个参数false(因为关注冒泡阶段),如果存在IE方法就用第二种,以此类推,但是以上两种方法没有考虑到IE浏览器作用域的问题,其实这个我也不是很理解,参考老师的课件,添加的时候:

function addEvent(node, type, handler) {
    if (!node) return false;
    if (node.addEventListener) {
        node.addEventListener(type, handler, false);
        return true;
    }
    else if (node.attachEvent) {
        node['e' + type + handler] = handler;
        node[type + handler] = function() {
            node['e' + type + handler](window.event);
        };
        node.attachEvent('on' + type, node[type + handler]);
        return true;
    }
    return false;
}

移除事件时:

function removeEvent(node, type, handler) {
    if (!node) return false;
    if (node.removeEventListener) {
        node.removeEventListener(type, handler, false);
        return true;
    }
    else if (node.detachEvent) {
        node.detachEvent('on' + type, node[type + handler]);
        node[type + handler] = null;
    }
    return false;
}

不是很明白window.event。

相关文章

  • JS 事件

    目录 事件流 事件处理程序HTML事件处理程序DOM0级事件处理程序DOM2级事件处理程序IE事件处理程序跨浏览器...

  • JavaScript-高级篇之事件

    什么是事件 掌握事件流 掌握DOM事件流与IE事件处理程序 掌握跨浏览器的事件处理程序 掌握event对象的常用属...

  • JavaScript事件02——事件处理程序

    大纲:概念(事件处理程序)事件处理程序(HTML事件,DOM0级,DOM2级,IE事件,跨浏览器) 一、概念: 1...

  • 跨浏览器的事件兼容

    我们都知道,在不同的浏览器下,添加和移除事件处理程序方式有所相同,要想写出跨浏览器的事件处理程序,首先我们要了解不...

  • 浏览器兼容

    前面内容我们可以看到,在不同的浏览器下,添加和移除事件处理程序方式不相同,要想写出跨浏览器的事件处理程序,首先我们...

  • Javascript事件小结

    本篇文章主要讲解Javascript的事件,如下: 事件流 如何注册和删除事件 跨浏览器的事件处理程序和事件对象 ...

  • 你知道页面上常见的事件类型吗

    我们常用的事件类型有UI事件,焦点事件,鼠标事件,滚轮事件,键盘事件和文本事件,用了跨浏览器添加事件处理程序的方法...

  • javascript 之事件处理函数和事件对象

    本文主要谈及问题: 关于编写跨浏览器的事件处理函数和事件对象 关于编写跨浏览器的事件处理函数和事件对象 为什么要编...

  • 跨浏览器的事件处理程序

    事件处理程序有DOM0级事件处理程序、DOM2级事件处理程序,IE事件处理程序,DOM0级事件处理程序具有简单,跨...

  • 十九

    跨浏览器的事件处理程序要保证处理事件的代码能在大多数浏览器下一致地运行,只需关注冒泡阶段。 这两个方法首先都会检测...

网友评论

      本文标题:跨浏览器的事件处理程序

      本文链接:https://www.haomeiwen.com/subject/guafqxtx.html