跨浏览器事件处理程序

saiyi绒小花

于 2019-10-08 09:21:38 发布

阅读量94

点赞数

本文链接：https://blog.csdn.net/qq_34634181/article/details/102804999

版权

html部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>跨浏览器事件处理程序</title>
    </head>
    <body>
        <button id="myBtn">点击我</button>
    </body>
</html>

js部分

绑定事件

Chrome Firefox IE9等 addEventListener
IE8及IE8以下的浏览器 attachEvent

移除事件

Chrome Firefox IE9等 removeEventListener
IE8及IE8以下的浏览器 detachEvent

var EventUtil = {
    addHandler:function(element,type,handler){// 添加事件处理程序
        //绑定事件
        //Chrome Firefox IE9等     addEventListener 
        //IE8及IE8以下的浏览器     attachEvent 
        if(element.addEventListener){// DOM2级事件处理程序
            element.addEventListener(type,handler,false);
        }else if (element.attachEvent) {// IE事件处理程序
            element.attachEvent("on"+ type,handler);
        } else{// DOM0级事件处理程序，事件流冒泡
            element["on"+type] = handler 
        }
    },
    removeHandler: function(element,type,handler){// 移除事件处理程序
        //移除事件
        //Chrome Firefox IE9等      
        //IE8及IE8以下的浏览器     
        if(element.removeEventListener){// DOM2级事件处理程序
            element.removeEventListener(type,handler,false);
        }else if (element.detachEvent) {// IE事件处理程序
            element.detachEvent("on"+type,handler);
        } else{ //DOM0级事件处理程序
            element["on"+type] = handler
        }
    }
}

测试

var btn = document.getElementById("myBtn");
    var handler = function(){
        alert("Clicked");
    }
    EventUtil.addHandler(btn,"click",handler);
  //EventUtil.removeHandler(btn,"click",handler);

saiyi绒小花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨浏览器事件处理程序

html部分<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>跨浏览器事件处理程序</title> </head> <body> <but...
复制链接

扫一扫