js事件封装(已兼容)

最新推荐文章于 2019-11-14 12:52:41 发布

aswind7

最新推荐文章于 2019-11-14 12:52:41 发布

阅读量518

点赞数

分类专栏：原生js-我封装好的函数方法等文章标签： javascript 代码 html

本文链接：https://blog.csdn.net/sqfbeijing/article/details/49095691

版权

原生js-我封装好的函数方法等专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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;
        }
    }
};

aswind7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件封装(已兼容)

addHandler: function(elem, type, handler){removeHandler: function(elem, type, handler){getEvent: function(event){getTarget: function(event){preventDefault: function(event){stopPropagation: function(event){
复制链接

扫一扫