Question

我尝试使用IIFE组织我的Javascript以使模块更加模块化。但是，我得到了一些我无法解释的奇怪行为。

我有两个div：

<div id="one">foo</div>
<div id="two">bar</div>

我有一些IIFE：

延迟加载和缓存元素
定义事件侦听器
绑定事件侦听器
处理初始化

我尝试为每个div分配一个点击处理程序，但是当我点击div时，所有处理程序都会触发。为什么呢？

http://jsfiddle.net/u61vet1g/

(function(foobar) {
    foobar.elements = (function() {
        var one, two;

        return{
            one: function(){
                return one || (one = $('#one'));
            },
            two: function(){
                return two || (two = $('#two'));
            }   
        }
    })();

    foobar.eventListeners = (function(elems){       

        return {
            oneOnClick: function(e) {
                alert('1');
            },
            twoOnClick: function(e) {
                alert('2');
            }
        }
    })(foobar.elements);

    foobar.bindEventListeners = (function(elems, listeners) {
        return function () {
            $(document).on('click', elems.one(), listeners.oneOnClick);

            $(document).on('click', elems.two(), listeners.twoOnClick);
        }
    })(foobar.elements, foobar.eventListeners);

    foobar.init = function (options) {
        foobar.bindEventListeners();
    };
})(window.foobar = window.foobar || {});
foobar.init();

Answer 1

我有一些IIFE

哇。这些看起来完全过度设计。

当我点击任一div时，所有处理程序都会触发。为什么呢？

因为您没有将处理程序绑定到元素，而是绑定到document：

$(document).on('click', …);

为第二个参数传递的jQuery对象将成为data parameter。相反，使用

elems.one().on('click', listeners.oneOnClick);
elems.two().on('click', listeners.twoOnClick);

Answer 2

这是因为您同时处理了文档尝试点击白色，你也会得到两个警报。

尝试遵循以下语法：

elems.one().on('click', listeners.oneOnClick);

Answer 3

Delegated Listener需要一个jQuery选择器而不是一个对象（http://api.jquery.com/on/）：

$(document).on('click', '#two', listeners.twoOnClick);

因此，如果您更改foobar.elements()以返回选择器字符串（例如：'#two'），则可以正常工作：

请参阅：http://jsfiddle.net/moob/u61vet1g/1/

触发单击事件时触发的所有单击事件处理程序

3 个答案: