Question

我总是想知道在代码可管理性，清洁度和代码重用方面处理事件的更好方法。

如果您使用前者，那么使用点击处理程序说出10个锚标记的列表将具有如下内容：

<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

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

对于.live，.delegate和.on，绑定了一个事件侦听器，通常位于DOM树中最顶层的节点之一：document ，document.documentElement（元素）或document.body。

因为 DOM 事件在树中冒泡，所以附加到body元素的事件处理程序实际上可以接收源自页面上任何元素的点击事件。所以，而不是绑定100个事件，你只能绑定一个。

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

.on的另一个优点是，如果向DOM添加元素，则不必担心将事件处理程序绑定到这些新元素。以一个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>')

单击此待办事项项不会将其从列表中删除，因为它没有绑定任何事件处理程序。如果我们使用.on，新项目将无需任何额外的努力就可以使用。以下是.on版本的外观：

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

Answer 2

第二种方法是可取的，因为我们不应该将我们的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.

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

2 个答案: