javascript - 事件处理程序应该动态添加还是在文档准备好时添加？

Question

目前，我使用两种方法将事件处理程序添加到动态添加的 DOM 对象中，原因是我不知道哪种方法更有意义。

方法 1 - 创建

function createButton(){
   var btn = $('<div class = "btn"/>');
   btn.on('click', function(){
     doStuff();
   });
   $('body').append(btn);
}

方法 2 - 文档准备就绪

function createButton(){
   var btn = $('<div class = "btn"/>');
   $('body').append(btn);
}

$('document').on('ready', function(){
   $('body').on('click', '.btn', function(){
     doStuff();
   });
});

我也有长期运行的应用程序考虑因素，并且会担心这里的垃圾收集问题。

Answer 1

在方法 1 中，您将一个新的(尽管不是唯一的)处理程序对象附加到您创建的每个按钮。

在方法 2 中，您对 .btn 类的任何内容重用相同的处理程序对象。

短期内，我会使用方法 2，因为对于任何给定按钮，您只有 1 个处理程序函数，因此您不妨通过不创建冗余处理程序来节省内存。