动态设置/更改事件处理程序是不好的做法吗？答案

【问题标题】：Is it bad practice to dynamically set/change event handlers?动态设置/更改事件处理程序是不好的做法吗？
【发布时间】：2017-07-08 09:52:58
【问题描述】：

我正在尝试用引导模式替换 confirm() 框以在页面中进行保存/删除操作。每个操作都有一个按钮（称为操作按钮），然后触发相应的模式。单击模态上的确认按钮时，会触发相应的功能。

我没有为这些操作中的每一个编写模式，而是在考虑是否可以只使用一个确认模式并在单击“操作按钮”时更改事件处理程序。像这样：

$("#confirm-button").attr('onclick',save_all());

当save_all 按钮被点击时。这是不好的做法吗？还有什么替代方法？谢谢！

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

我不认为更改事件处理程序是一个好的选择，因为您应该处理以前的附加处理程序以避免内存泄漏和奇怪的行为。

更好的方法可能是定义一个通用处理程序，该处理程序将从 DOM 上的 data 属性中读取，在确认的情况下该怎么做。

主要是这样的处理程序不应该与工作人员耦合。

要实现这一点，您可以定义将从您的通用处理程序触发的自定义事件。

我的意思是这样的：

function confirmAction(ev) {
    // you can save in the HTML the name of the proper event
    var whatEv = $(this).data('my-key');

    // Here you could fire a custom event.
    $(this).trigger(whatEv);
}

最后一件事，正如@trincot 所指出的，您在 OP 中的代码是错误的。

【讨论】：

【解决方案2】：

它甚至不会做你想做的事，因为你在设置属性的那一刻调用了save_all，它将是存储在onclick属性中的函数的返回值，如果是，则转换为字符串还不是一个字符串。这很可能不是您打算做的。

即使属性值是正确的，这也不是最佳实践，因为：

需要评估/解析该属性值，这意味着您可能会遇到后期语法错误
它替换了 onclick 属性的先前值，这可能是一种不良影响（尽管我理解在您的情况下这是您想要的）

改为以 jQuery 方式绑定事件处理程序，并确保您不调用该函数，而是传递其引用：

$("#confirm-button").on('click', save_all);

如果目的是替换任何先前的点击处理程序，则链接off 调用：

$("#confirm-button").off('click').on('click', save_all);

【讨论】：

是的，我不是故意的。