JavaScript设计模式(七)【外观模式】

最新推荐文章于 2025-02-24 17:01:32 发布

转载最新推荐文章于 2025-02-24 17:01:32 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/WuLex

Javascript设计模式专栏收录该内容

37 篇文章

订阅专栏

本文介绍在不同浏览器环境下实现事件监听、阻止默认行为及简化DOM操作的兼容性编程方法，包括使用addEventListener、attachEvent及直接赋值的方式绑定事件，以及通过不同浏览器的事件对象阻止默认行为。

兼容方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外观模式-兼容方式</title>
</head>
<body>
<script>
    //外观模式实现
    function addEvent(dom, type, fn) {
        //对于支持DOM2级事件处理程序addEventListener方法的浏览器
        if (dom.addEventListener) {
            dom.addEventListener(type, fn, false);
        } //对于不支持addEventListener方法但支持attachEvent方法的浏览器
        else if (dom.attachEvent) {
            dom.attachEvent('on' + type, fn);
        } //对于不支持addEventListener方法也不支持attachEvent方法，
        // 但支持on+'事件名'的浏览器
        else {
            dom['on' + type] = fn;
        }
    }

    window.onload = function() {
        var myInpu = document.getElementById("myinput");
        addEvent(myInpu,
            'click',
            function() {
                console.log("绑定第一个事件！");
            });
        addEvent(myInpu,
            'click',
            function() {
                console.log("绑定第二个事件！");
            });
        addEvent(myInpu,
            'click',
            function() {
                console.log("绑定第三个事件！");
            });
    }
</script>

<button id="myinput">点击我</button>
</body>
</html>

阻止默认行为-兼容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认行为-兼容模式</title>
</head>
<body>
<script>
    //获取事件对象
    var getEvent = function(event) {
        //标准浏览器返回event,IE下window.event
        return event || window.event;
    }
    //获取元素
    var getTarget = function(event) {
        var event = getEvent(event);
        //标准浏览器下event.target,IE下event.srcElement
        return event.target || event.srcElement;
    }
    //阻止默认行为
    var preventDefault = function(event) {
        var event = getEvent(event);
        //标准浏览器
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    }

    document.onclick = function(e) {
        //阻止默认行为
        preventDefault(e);
        //获取事件源目标对象
        if (getTarget(e) !== document.getElementById("myinput")) {
            console.log("点击事件！");
        }
    }
</script>

<button id="myinput">myinput</button>
<button id="myinput2">myinput2</button>
</body>
</html>

简约版属性样式方法库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简约版属性样式方法库</title>
</head>
<body>
<script>
    var A = {
        //通过id获取元素
        g: function(id) {
            return document.getElementById(id);
        },
        //设置元素css属性
        css: function(id, key, value) {
            var style = document.getElementById(id).style;
            style[key] = value;
        },
        //设置元素的属性
        attr: function(id, key, value) {
            document.getElementById(id)[key] = value;
        },
        html: function(id, html) {
            document.getElementById(id).innerHTML = html;
        },
        //为元素绑定事件
        on: function(id, type, fn) {
            document.getElementById(id)['on' + type] = fn;
        }
    }

    window.onload = function() {
        A.css('box', 'background', 'red');
        A.attr('box', 'className', 'box');
        A.html('box', '这是新添加的内容');
        A.on('box',
            'click',
            function() {
                A.css('box', 'width', '500px');
            });
    }
</script>

<div id="box" style="border: 1px solid; width: 200px; height: 200px"></div>
</body>
</html>