Javascript跨瀏覽器的事件對象

時間 2019-11-25

原文原文鏈接

1、跨瀏覽器的事件對象html

var EventUtil = {
    ///添加事件
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    //獲取事件
    getEvent: function (event) {
        return event ? event : window.event;
    },
    //獲取事件元素目標
    getTarget: function (event) {
        return event.target || event.srcElement;
    },
    //取消事件的默認行爲
    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault();
        }
        else {
            event.returnValue = false;
        }
    },
    ///移除事件
    removeHandler: function (element, type, handler) {
        if (element.removeEvenListener) {
            element.removeEvenListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        }
        else {
            event.cancelBubble = true;
        }
    }
};

2、右鍵菜單demo瀏覽器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <div id="myDiv">
        點擊右鍵
    </div>
    <ul id="myMenu" style="position: absolute; visibility: hidden; background-color: silver;">
        <li><a href="http://baidu.com">baidu.com</a>
        </li>
        <li><a href="http://zhihu.com">zhihu.com</a>
        </li>
    </ul>
    <script src="../Scripts/EventUtil.js"></script>
    <script>
        EventUtil.addHandler(window, "load", function (event) {
            var div = document.getElementById("myDiv");
            EventUtil.addHandler(div, "contextmenu", function (event) {
                event = EventUtil.getEvent(event);
                EventUtil.preventDefault(event);

                var menu = document.getElementById("myMenu");
                menu.style.left = event.clientX + "px";
                menu.style.top = event.clientY + "px";
                menu.style.visibility = "visible";

            });

            EventUtil.addHandler(document, "click", function (event) {
                document.getElementById("myMenu").style.visibility = "hidden";
            });
        })

        EventUtil.addHandler(window, "beforeunload", function (event) {
            event = EventUtil.getEvent(event);
            var message = "您肯定要離開當前頁";
            event.returnValue = message;
            return message;
        });
    </script>
</body>
</html>