js事件封装(已兼容)

来源：互联网发布：程序员专用昵称编辑：程序博客网时间：2024/05/19 13:21

html代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <button>点我</button> <br><br>    <a href="http://www.baidu.com">我链接到百度！</a>    <script src="a.js"></script>        <script>        var btn = document.querySelector("button");        var link = document.querySelector("a");        var body = document.querySelector("body");        var btnHandler = function(event){            console.log("我是btnHandler内部！");            console.log(EventUtil.getEvent(event).type);            console.log("我的target是" + EventUtil.getTarget(event));            console.log("我的current target是" + EventUtil.getEvent(event).currentTarget);            // console.log("接下来我要阻止冒泡了！");            // EventUtil.stopPropagation(event);        };        var linkHandler = function(event){            EventUtil.preventDefault(event);        };        var bodyHandler = function(event){            console.log("\n");            console.log("我是bodyHandler内部！");            console.log(EventUtil.getEvent(event).type);            console.log("我的target是" + EventUtil.getTarget(event));            console.log("我的current target是" + EventUtil.getEvent(event).currentTarget);        };        EventUtil.addHandler(btn,"click",btnHandler);        EventUtil.addHandler(link,"click",linkHandler);        EventUtil.addHandler(body,"click",bodyHandler);    </script></body><html>

a.js代码

/***自己把dom2级事件封装好，这样可兼容各种浏览器！主要是解决ie8及以下的不兼容问题**/var EventUtil = {     addHandler: function(elem, type, handler){        if (elem.addEventListener) {            elem.addEventListener(type, handler, false);        } else if (elem.attachEvent) {            //ie8及以下            elem.attachEvent("on" + type, handler);        } else {            elem["on" + type] = handler;        }    },    removeHandler: function(elem, type, handler){        if (elem.removeEventListener) {            elem.removeEventListener(type, handler, false);        } else if (elem.detachEvent) {            //ie8及以下            elem.detachEvent("on" + type, handler);        } else {            elem["on" + type] = null;        }    },    getEvent: function(event){        //ie返回window.event        return event || window.event;    },    //获取正在进行的目标而非定义的那个目标(currentTarget)    getTarget: function(event){        return event.target || window.event.srcElement;    },    //阻止默认事件的执行    preventDefault: function(event){        if (event.preventDefault) {            event.preventDefault();        }         else {            window.event.returnValue = false;        }    },    //停止冒泡    stopPropagation: function(event){        if (event.stopPropagation) {            event.stopPropagation();        }         else {            window.event.cancelBubble = true;        }    }};

0 0