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

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个处理函数，因此您最好不创建冗余处理程序来节省内存。