使用 JavaScript 处理事件的最佳实践答案

【问题标题】：Best practice for event handling with JavaScript使用 JavaScript 处理事件的最佳实践
【发布时间】：2017-07-25 13:24:13
【问题描述】：

事件处理程序的最佳做法是什么？我不确定是否应该将按钮与触发功能一起放置，或者是否应该像 jQuery 一样等待按钮的点击事件。

通常你可以这样做：

$('.buttonOK').on('click', function(){
    alert('ok');
});

或者只是在按钮上添加javascript:ButtonAction().

我应该更喜欢哪个？

【问题讨论】：

Best practice zombies
不加在标记里比较好，但最后还是个人意见。
这能回答你的问题吗？ Best practices for where to add event listeners

标签： javascript jquery

【解决方案1】：

简答：绝对是第一种方式。事件委托的性能更高，但在代码中需要额外的条件，所以这基本上是复杂性与性能的权衡。

更长的答案：对于少量元素，添加单独的事件处理程序可以正常工作。但是，随着您添加越来越多的事件处理程序，浏览器的性能开始下降。原因是监听事件是内存密集型的。

来源：https://stackoverflow.com/a/26104827/12300287

【讨论】：

所以我应该等待用户的 html 操作，例如单击按钮并使用该功能，或者我必须为按钮定义触发功能？

【解决方案2】：

我也是新手，但我发现一个好的做法是“函数式编程”。这意味着你声明你的函数，然后调用它。当您希望在多个事件中发生事件时，这会有所帮助。

function ok () {
            consol.log("ok");  //consol log is much less annoying for debugging
        }

        $(".buttonOK, .btnOK").click(ok);  // calls function on class button ok or btnOK
        $(document).keyup(function(e) {if (e.which === 13) {ok();}}); //callsfunction on enter

我希望这会有所帮助:)

【讨论】：

嗨，谢谢，我在编程方面不是很新，但在 javascript 中我只是想了解这一点最佳实践，以了解在大型平台 CMS 中是否不会延迟脚本。