高阶函数 - 惰性加载函数

最新推荐文章于 2025-05-28 20:51:13 发布

weixin_30402343

最新推荐文章于 2025-05-28 20:51:13 发布

阅读量71

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sorrowx/p/7151385.html

本文介绍了一种实现跨浏览器事件绑定的惰性加载高阶函数的方法。通过使用JavaScript，该函数能够根据不同的浏览器环境选择合适的事件绑定方式，并且通过闭包特性实现了代码的复用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高阶函数 - 惰性加载函数</title>
</head>
<body>
    <div style="width: 100px; height: 100px; background: #f60;" id="div1"></div>
    <script>
        /**
         * 根据作用域链内部会重写外部的addEvent变量(如果在1. 2.处, 在addEvent前加上var就不是惰性了)
         */
        var addEvent = function(ele, type, handler) {
            if (window.addEventListener) {    // 标准
                addEvent = function(ele, type, handler) {    // 1.
                    ele.addEventListener(type, handler, false);
                };
            } else if (window.attachEvent) {
                addEvent = function(ele, type, handler) {    // 2.
                    ele.attachEvent('on' + type, handler);
                };
            };
            addEvent(ele, type, handler);
        };

        var div = document.querySelector('#div1');
        addEvent(div, 'click', function() {
            console.log(111);
        });

        addEvent(div, 'click', function() {
            console.log(222);
        })

    </script>
</body>
</html>