JS案例26-addEventListener( )和attachEvent( ) 兼容写法

  • addEventListener()火狐谷歌IE9+支持

  • attachEvent()IE678支持

这就需要写一个完美兼容的方法啦

源码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button>赋诗</button>

<script>

    var btn = document.getElementsByTagName("button")[0];

    //兼容写法
    EventListen = {
        addEvent: function (ele,fn,str) {
            //通过判断调用的方式兼容IE678
            //判断浏览器是否支持该方法,如果支持那么调用,如果不支持换其他方法
            if(ele.addEventListener){
                //直接调用
                ele.addEventListener(str,fn);
            }else if(ele.attachEvent){
                ele.attachEvent("on"+str,fn);
            }else{
                //在addEventListener和attachEvent都不存在的情况下,用此代码
                ele["on"+str] = fn;
            }
        }
    }


    EventListen.addEvent(btn,fn1,"click")
    EventListen.addEvent(btn,fn2,"click")

    function fn1(){
        console.log("九尺龙泉万卷书,上天生我意何如。");
    }
    function fn2(){
        console.log("不能报国平天下,枉为男儿大丈夫。");
    }
</script>
</body>
</html>

还可以去除你添加的某个事件

EventListen = {
        addEvent: function (ele,fn,str) {
            //通过判断调用的方式兼容IE678
            //判断浏览器是否支持该方法,如果支持那么调用,如果不支持换其他方法
            if(ele.addEventListener){
                //直接调用
                ele.addEventListener(str,fn);
            }else if(ele.attachEvent){
                ele.attachEvent("on"+str,fn);
            }else{
                //在addEventListener和attachEvent都不存在的情况下,用此代码
                ele["on"+str] = fn;
            }
        },
        removeEvent: function (ele,fn,str) {
            if(ele.removeEventListener){
                ele.removeEventListener(str,fn);
            }else if(ele.detachEvent){
                ele.detachEvent("on"+str,fn);
            }else{
                ele["on"+str] = null;
            }
        }
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,514评论 1 45
  • DOM DOM内容主要分为四部分: 什么是DOM和节点; 获取节点; 节点操作(3种); 属性操作(3种)。 什么...
    magic_pill阅读 4,294评论 0 1
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 14,573评论 2 59
  • 什么是DOM?DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Obje...
    浮若年华_7a56阅读 2,286评论 0 0
  • 年轻的时候,我们总希望成功,总希望付出都有回报,总希望在短平快的获得认可。可是有时候成功总是那么近在咫尺又遥不可及...
    我叫在水一方阅读 3,452评论 2 5

友情链接更多精彩内容