javascript - 当单个单击事件触发时，所有单击事件处理程序都会触发

Question

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

我有两个 div:

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

我有一些 IIFE 可以:

• 延迟加载和缓存元素
• 定义事件监听器
• 绑定(bind)事件监听器
• 处理初始化

我尝试为每个 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

I have some IIFEs to

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

when I click on either div, all handlers fire. Why?

因为您没有将处理程序绑定(bind)到元素，而是绑定(bind)到文档:

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

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

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