JavaScript设计模式_外观模式_外观模式实现跨浏览器事件处理 getevent-优快云博客

本文链接：https://blog.youkuaiyun.com/CWH0908/article/details/88952332

为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易，即对底层封装来简化用户使用
外观模式中定义的统一接口，可以解决浏览器兼容性问题，如EventUtil对象(这只是外观模式应用的一部分)，很多代码库通过外观模式封装多个功能，简化底层操作方法。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>外观模式</title>

    <script>
        window.οnlοad = function () {

            var EventUtil = {

                addHandler: function (element, type, handler) {
                    if (element.addEventListener) { //存在DOM2级函数
                        element.addEventListener(type, handler, false);
                    } else if (element.attachEvent) { //IE浏览器
                        element.attachEvent(type, handler, false);
                    } else {
                        element["on" + type] = handler; //DOM0级事件，只能定义同类事件一次，多则覆盖，尽量避免此类事件函数添加。
                    }
                },

                removeHandler: function (element, type, handler) { //取消事件
                    if (element.removeEventListener) {
                        element.removeEventListener(type, handler, false);
                    } else if (element.detachEvent) {
                        element.detachEvent("on" + type, handler);
                    } else {
                        element["on" + type] = null;
                    }
                },

                getEvent: function (event) { //使用这个方法跨浏览器取得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;
                    }
                },

                stopPropagation: function (event) { //立即停止事件在DOM中的传播
                    //避免触发注册在document.body上面的事件处理程序
                    if (event.stopPropagation) {
                        event.stopPropagation();
                    } else {
                        event.cancelBubble = true;
                    }
                }
            }

            var btn1 = document.getElementById("myBtn1");
            var handler = function () {
                alert("hello");
            }
            EventUtil.addHandler(btn1, "click", handler);
        }
    </script>
</head>

<body>
    <button id="myBtn1">按我</button>
    <p>按F12打开调试界面</p>
</body>

</html>