事件处理程序附加在哪里，为什么会出现？ [复制]答案

【问题标题】：Where is the eventhandler attached and why is it present at all? [duplicate]事件处理程序附加在哪里，为什么会出现？ [复制]
【发布时间】：2016-08-24 21:03:16
【问题描述】：

在 JQuery 中使用 Typescript 我创建了一个对话框，然后将单击事件附加到两个按钮和窗口标题中的“X”。每次用户希望打开对话框时，代码实际上都会创建一个新的 SettingDlog 对象，但是绑定的单击事件似乎会为用户选择显示“设置”对话框的每次后续时间添加一个附加事件。

我认为可能单击事件被添加到 DOM 对象，因为它独立于 typescript 类（JavaScript 对象），但我在 DOM 资源管理器中看不到它，所以我认为这是不正确的。

作为一种解决方法，我在调用事件处理程序时显式删除它，但我不明白为什么我必须这样做，因为我每次都创建一个新的 SettingDlog 对象。

显示对话框的代码：

 let myDlog = new SettingsDlog();
 myDlog.closedCallback = "settingsDlog_Closed";
 myDlog.show();

然后在我的 SettingsDlog 的 show() 方法中：

show() {
     $('#closeX').click({ isOK: false }, this.onClose.bind(this))
     $('#btnCancel').click({ isOK: false }, this.onClose.bind(this))
     $('#btnOK').click({ isOK: true }, this.onClose.bind(this));
}

最后，当用户点击三个 UIElement 中的任何一个来关闭对话框时，设置对话框的 onClose() 方法就会被调用：

 onClose(event) {
    this.dialogResult = event.data.isOK;
    if (!AppHelper.isNullOrEmpty(this._closedCallback))
        MainPage[this._closedCallback](this);
}

最后为 MainPage 对象调用了 _closedCallback：

settingsDlog_Closed(sender: SettingsDlog) {
        if (!sender.dialogResult)
            return;
       // if here do something useful...
}

当我在 settingsDlog_Closed 中设置断点并单击以第二次（或第三次...）显示“设置”对话框时，它的行为就像添加了第二次（或第三次）单击事件。

这是我作为解决方法添加到 SettingsDlog 的 onClosed 方法的代码：

 $('#closeX').off('click');
 $('#btnCancel').off('click');
 $('#btnOK').off('click');

有人可以帮我理解这种奇怪的行为吗？

【问题讨论】：

“我每次都在创建一个新的 SettingDlog 对象”，除非你的类正在销毁和重新创建元素，否则元素会像事件侦听器一样保留在 DOM 中添加，因此您必须在 onclose 事件中关闭它们
show() 中的行应该类似于以下行： $('#closeX').click({ isOK: false }, () => this.onClose) 如果有效，我将解释原因:)
@PatrickEvans 类 SettingsDlog 是一个 typescript 类（JavaScript 对象），存在与 DOM 交互。正如我所说，我认为它在 DOM 中，但它没有被附加。我查看了 DOM 元素的 onClick 方法，在我附加点击事件后它为空。
@Granga 是的，这行得通。
jQuery .click 和类似的事件方法不设置onclick属性，它使用addEventListener

标签： javascript jquery typescript

【解决方案1】：

感谢@Patrick Evans 为我指明了正确的方向。这是我需要知道的。 How to check whether dynamically attached event listener exists or not?

考虑到这一点，我向 SettingsDlog 类添加了一个静态变量，一旦调用“show”方法，该变量就会设置为 true。类对象的任何后续实例化都不会重复事件处理程序附加过程。

【讨论】：