javascript - 哪个更好 : using onclick or find element that triggered the event for handling events in jQuery?

Question

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

如果您使用前者，那么假设包含 10 个带有点击处理程序的 anchor 标记的列表将包含以下内容:

<a href="javascript:void(0);" onclick="handleEvent();">Click Me</a>
<a href="javascript:void(0);" onclick="handleEvent();">Click Me</a>
<a href="javascript:void(0);" onclick="handleEvent();">Click Me</a>

... 10 次

这看起来有点奇怪。

使用后一种方法，使用匿名函数，它就像:

$('a').on('click', function(e){});

Answer 1

归根结底，每个事件都绑定(bind)到 DOM 中的某个元素。对于 .bind，您将直接绑定(bind)到 jQuery 对象中的一个或多个元素。例如，如果您的 jQuery 对象包含 100 个元素，您将绑定(bind) 100 个事件监听器。

在 .live、.delegate 和 .on 的情况下，单个事件监听器被绑定(bind)，通常在其中一个DOM 树中最顶层的节点:document、document.documentElement(元素)或 document.body。

因为 DOM 事件通过树向上冒泡，附加到 body 元素的事件处理程序实际上可以接收来自页面上任何元素的点击事件。因此，您可以只绑定(bind)一个事件，而不是绑定(bind) 100 个事件。

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

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

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

接下来，一些 jQuery:

     // Remove the todo item when clicked.
   $('#todo').children().click(function () {
     $(this).remove()
   })

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

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

单击此待办事项不会将其从列表中删除，因为它没有绑定(bind)任何事件处理程序。相反，如果我们使用 .on，新项目将在我们这部分无需任何额外努力的情况下工作。以下是 .on 版本的外观:

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