Javascript 哪一个更好：在jQuery中使用触发事件的onclick或find元素来处理事件？

我一直在想，在代码可管理性、清洁度和代码重用方面，哪种处理事件的方法更好

如果使用前者，则假设一个包含10个锚定标记和click handler的列表将有如下内容：

。。。十次

这看起来有点奇怪

对于后一种方法，使用匿名函数，它类似于：

---

$（'a'）。在（'click'，函数（e）{}）
第二种方法更可取，因为我们不应该将JavaScript与HTML混合使用。（关注点分离）。这样你的代码就保持干净了。
这也适用于动态插入的HTML代码

 `$('a').on('click', function(e){});` // Using jQuery.

使用Vanilla JS：

  document.getElementById("idName").addEventListener("click", function(){});  // Bind events to specific element.

  document.addEventListener("click", function(){});  // Bind events to the document. Take care to handle event bubbling all the way upto the document level.

最后，每个事件都绑定到DOM中的某个元素。在
.bind
的情况下，您直接绑定到jQuery对象中的元素。例如，如果jQuery对象包含100个元素，那么将绑定100个事件侦听器

在
.live
、
.delegate
和
.on
的情况下，单个事件侦听器被绑定，通常位于DOM树中最顶端的节点之一：
document
、
document.documentElement
（元素）或
document.body

由于DOM事件在树中冒泡出现，因此连接到body元素的事件处理程序实际上可以接收来自页面上任何元素的click事件。因此，与其绑定100个事件，不如只绑定一个。

对于少量元素（比如少于五个），直接绑定事件处理程序可能更快（尽管性能不太可能成为问题）。对于大量元素，请始终使用.on

on的另一个优点是，如果将元素添加到DOM中，则无需担心将事件处理程序绑定到这些新元素。以HTML列表为例：

 <ul id="todo">
  <li>buy milk</li>
  <li>arrange haircut</li>
  <li>pay credit card bill</li>
</ul>

现在，如果我们添加一个待办事项呢

   $('#todo').append('<li>answer all the questions on SO</li>')

你已经回答了你自己的问题。使用jQuery
打开
可以避免代码重复。此外，它允许您进行更复杂的事件分配，甚至多次。至于我，我从来没有使用过
onclick
HTML属性。我想是的，但是维护代码库有点困难，特别是如果你不使用JavaScript框架的话。一旦它获得超过1000行代码，搜索事件处理程序就成了一场噩梦，特别是当您将其嵌套为：$（'.someDiv'）.find（'someOtherDiv'）.find（'li'）.find（'a'）.on（'click'，function（）{}）；第二个选项更好，因为它更干净，并且将HTML和javascript代码分开，这是有意义的。关于我在上面的问题下的评论，你会怎么说？你必须指定html元素，这是一个选项吗？使查询更容易？您可以将此问题标记为已回答@staid\u daddyOk此答案似乎与我所寻找的内容非常匹配，因此将此标记为已接受。
   $('#todo').append('<li>answer all the questions on SO</li>')

   $('#todo').on('click', 'li', function (event) {
     $(event.target).remove()
   })