简短回答：肯定是用第一种方法。事件委托的性能更高，但需要在代码中添加额外的条件，因此它基本上是复杂性与性能的权衡。
较长的答案：对于少量元素，添加单独的事件处理程序效果很好。然而，随着您添加越来越多的事件处理程序，浏览器的性能开始下降。原因是监听事件是内存密集型的。
然而，在 DOM 中，事件从最具体的目标“冒泡”到最一般的目标，并在此过程中触发任何事件处理程序。这是一个例子：
<html>
<body>
<div>
<a>
<img>
</a>
</div>
</body>
</html>
如果您点击<img>标签，单击事件将按以下顺序触发任何事件处理程序：
- img
- a
- div
- body
- html
-
document object
活动委托是倾听父母意见的技巧（比如<div>）用于一堆事件处理程序而不是您关心的特定元素（例如<img>）。事件对象将有一个 target 属性，该属性指向事件起源的特定 dom 元素（在本例中<img>).
您的事件委托代码可能如下所示：
$(document).ready(function(){
$('<div>').on('click', function(e) {
// check if e.target is an img tag
// do whatever in response to the image being clicked
});
});
欲了解更多信息，请查看戴夫沃尔什的关于活动委托的博客文章 http://davidwalsh.name/event-delegate或duckduckgo“事件委托”。
OP 中代码示例的注释：在第一个例子中，target.hasClass('editable')意味着单击的特定事物必须具有可编辑的类才能执行 if 块。正如一位评论者指出的那样，这可能不是您想要的。您可能想尝试以下方法：
$(document).on('click', function(e) {
if ($(e.target).parents(".editable").length) {
// Do whatever
}
});
让我们稍微分解一下：
-
$(e.target)- 页面上单击的任何内容都会转换为 jQuery
-
.parents(".editable")- 找到单击的元素的所有祖先，然后过滤以仅包含“可编辑”类的元素
-
.length- 这应该是一个整数。如果为 0，则表示没有“可编辑”类的父级
