搞一个兼容浏览器的事件函数

最新推荐文章于 2024-06-26 09:51:03 发布

weixin_34245169

最新推荐文章于 2024-06-26 09:51:03 发布

阅读量105

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5ced00bef265da1bd522af3a

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <p id="demo">
        <a>点击我将获得节点1</a>
        <a>点击我将获得节点2</a>
    </p>
    <script type="text/javascript">
        // event(事件)工具集
        eventUntil = {
            // 页面加载完成后
            // 主要是原生JS，页面只能加载一次window.onload；这里使用该方法可以绑定多个方法。
            readyEvent: function (fn) {
                if (fn == null) {
                    fn = document;
                }
                var oldonload = window.onload;
                if (typeof window.onload != 'function') {
                    window.onload = fn;
                } else {
                    window.onload = function () {
                        oldonload();
                        fn();
                    };
                }
            },
            // 视能力分别使用dom0||dom2||IE方式 来绑定事件
            // 下面的顺序：标准dom2，IE dom2， dom
            // 参数： 操作的元素,事件名称 ,事件处理程序
            addEvent: function (element, type, handler) {
                if (element.addEventListener) {
                    //事件类型、需要执行的函数、是否捕捉
                    element.addEventListener(type, handler, false);
                } else if (element.attachEvent) {
                    element.attachEvent('on' + type, function () {
                        handler.call(element);
                    });
                } else {
                    element['on' + type] = handler;
                }
            },
            // 移除事件
            removeEvent: function (element, type, handler) {
                if (element.removeEnentListener) {
                    element.removeEnentListener(type, handler, false);
                } else if (element.datachEvent) {
                    element.detachEvent('on' + type, handler);
                } else {
                    element['on' + type] = null;
                }
            },
            // 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
            stopPropagation: function (ev) {
                if (ev.stopPropagation) {
                    ev.stopPropagation();// 标准w3c
                } else {
                    ev.cancelBubble = true;// IE
                }
            },
            // 取消事件的默认行为
            preventDefault: function (event) {
                if (event.preventDefault) {
                    event.preventDefault();// 标准w3c
                } else {
                    event.returnValue = false;// IE
                }
            },
            // 获取事件目标
            getTarget: function (event) {
                // 标准W3C 和 IE
                return event.target || event.srcElement;
            },
            // 获取event对象的引用，取到事件的所有信息，确保随时能使用event；
            getEvent: function (e) {
                var ev = e || window.event;
                if (!ev) {
                    var c = this.getEvent.caller;
                    while (c) {
                        ev = c.arguments[0];
                        if (ev && Event == ev.constructor) {
                            break;
                        }
                        c = c.caller;
                    }
                }
                return ev;
            }
        };

        eventUntil.readyEvent(function () {
            console.log("相比于window.onload可以绑定多个 按顺序执行。");
        })
        eventUntil.addEvent(document.getElementById("demo"), "click", function () {
            alert("我点击了p元素")
        })

    </script>
</body>

</html>

复制代码

weixin_34245169

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
搞一个兼容浏览器的事件函数

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><body> <p id="demo"> <a>点击我将获得节点1</a&g...
复制链接

扫一扫