Javascript 中 OOP 中的重复事件

Question

我知道问题是什么，但我真的不明白为什么会发生这种情况。假设你有这个：

.HTML：

<div><p>Hello</p><button>Fire</button></div>
<br/>
<button id="menu-button">Menu</button>

JavaScript：

function myObject(container, buttonElement) {
    this.container = container;
}
myObject.prototype.change = function () {
    var box = this.container;
    console.log(box);
    box.find('button').on('click', function() {
        console.log('firing');
        box.find('p').toggle();
    });
};
var obj1 = new myObject($('div'));
$('#menu-button').on('click', function(){
    obj1.change();
});​

小提琴：http://jsfiddle.net/L24As/1/

如您所见，当您单击"菜单"按钮并启动obj1.change()时，这会将事件处理程序添加到"Fire"按钮，一切都按预期工作。但是，如果您再次单击"菜单"按钮，您将创建另一个事件，因此现在toggle()不起作用，因为第一个事件隐藏，第二个事件显示段落。为什么？我本以为应该覆盖该事件。

我是这样解决的：

http://jsfiddle.net/L24As/3/

function myObject(container) {
    this.container = container;
    this.change = function () {
        var box = this.container;
        console.log(box);
        box.find('button').on('click', function() {
            console.log('firing');
            box.find('p').toggle();
        });
    };
}
var obj1 = new myObject($('div'));
obj1.change();

这是一个好的解决方案吗？该事件从一开始就附加到"Fire"按钮上，因此"菜单"按钮用于显示其他内容，这使得它们有点不同，尽管它们执行相同的任务。

Answer 1

我本以为应该覆盖该事件。

不，它不会被覆盖。它添加它们并触发它们（请参阅on函数后面的addEventListener）。

您应该添加一次事件。您的解决方案是正确的。

这是问题的本质（见评论）：

myObject.prototype.change = function () {
    var box = this.container;
    console.log(box);
    box.find('button').on(
        'click',
        // Here you create a new function object.
        // Each time you call the `change` method,
        // it will add another function object as an event handler.
        function () {
            console.log('firing');
            box.find('p').toggle();
        }
    );
};