原生JS实现跨浏览器的事件处理程序

最新推荐文章于 2021-01-26 16:49:18 发布

judyge

最新推荐文章于 2021-01-26 16:49:18 发布

阅读量478

点赞数

分类专栏： js与前端

js与前端专栏收录该内容

863 篇文章 5 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨浏览器的事件处理程序</title>
</head>
<body>
    <input type="button" value="click me" id="myBtn"/>
    <input type="button" value="解除" id="unlisten"/>
 
    <script>
 
        function $(id){
            return document.getElementById(id);
        }
 
        var EventUtil={
            fnCount:0
            ,fnData:{}
            ,addHandler:function(element,type,handler){
                this.fnCount++;
                handler.fid = this.fnCount;
                var _fn = handler;
                handler = function(){
                    _fn.call(element);
                };
                this.fnData[this.fnCount] = handler;
 
                if(element.addEventListener){
                    element.addEventListener(type,handler,false);
                }   else if(element.attachEvent){
                    element.attachEvent("on"+type,handler);
                }   else {
                    element["on"+type]=handler;
                }
            }
            ,removeHandler:function(element,type,handler){
                handler = this.fnData[handler.fid];
                if(element.removeEventListener){
                        element.removeEventListener(type,handler,false);
                }else if(element.detachEvent){
                        element.detachEvent("on"+type,handler);
                }else{
                        element["on"+type]=null;
                }
            }
        }
 
        var btn=$("myBtn");
        var unbtn = $('unlisten');
        var bindFn1=function(){
            alert(this.id);
        };
        var bindFn2=function(){
            alert('2');
        };
 
        EventUtil.addHandler(btn,"click",bindFn1);
        EventUtil.addHandler(btn,"click",bindFn2);
        //EventUtil.removeHandler(btn,"click",bindFn1);
        EventUtil.addHandler(unbtn,"click",function(){
            EventUtil.removeHandler(btn,"click",bindFn1);
        });
 
 
    </script>
</body>
</html>

judyge

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现跨浏览器的事件处理程序

跨浏览器的事件处理程序 function $(id){ return document.getElementById(id); } var EventUtil={ fnCount:0 ,fnData:{} ,a
复制链接

扫一扫