jQuery:.click() 和 .on(“click") 之间的区别 [英] jQuery: difference between .click() AND .on("click")
问题描述
我经常使用
$(selector).click(...
但有些人建议我改用这个:
But some people recommend me to use this instead:
$(selector).on("click", function(...
或者 $(selector).live("click"... (Deprecated)
Or $(selector).live("click"... (Deprecated)
我阅读了手册，但我的初学者无法理解它.我对他们使用的所有术语感到困惑.我仍然不知道区别，也不知道为什么要使用 .on()
http://api.jquery.com/on/
I read the manual, but my begginer's mind couldn't understand it. I got confused with all the terminology they used. I still do not know the difference nor why to use .on()
http://api.jquery.com/on/
推荐答案
归根结底，每个事件都绑定到 DOM 中的 some 元素.对于 .bind，您直接绑定到 jQuery 对象中的一个(或多个)元素.例如，如果您的 jQuery 对象包含 100 个元素，那么您将绑定 100 个事件侦听器.
At the end of the day, every event is bound to some element in the DOM. In the case of .bind, you're binding directly to the element (or elements) in your jQuery object. If, for example, your jQuery object contained 100 elements, you'd be binding 100 event listeners.
在 .live、.delegate 和 .on 的情况下，单个 事件侦听器是绑定，通常在 DOM 树中的最顶层节点之一:document、document.documentElement( 元素)，或document.body.由于 DOM 事件在树中冒泡，附加到 body 元素的事件处理程序实际上可以接收源自页面上任何元素的点击事件.因此，与其绑定 100 个事件，不如只绑定一个.
In the case of .live, .delegate, and .on, a single event listener is bound, generally on one of the topmost nodes in the DOM tree: document, document.documentElement (the <html> element), or document.body. Because DOM events bubble up through the tree, an event handler attached to the body element can actually receive click events originating from any element on the page. So, rather than binding 100 events you could bind just one.
对于少量元素(比如少于五个)，直接绑定事件处理程序可能会更快(尽管性能不太可能成为问题).对于大量元素，请始终使用 .on.
For a small number of elements (fewer than five, say), binding the event handlers directly is likely to be faster (although performance is unlikely to be an issue). For a larger number of elements, always use .on.
.on 的另一个优点是，如果您向 DOM 添加元素，则无需担心将事件处理程序绑定到这些新元素.以 HTML 列表为例:
The other advantage of .on is that if you add elements to the DOM you don't need to worry about binding event handlers to these new elements. Take, for example, an HTML list:
<ul id="todo">
<li>buy milk</li>
<li>arrange haircut</li>
<li>pay credit card bill</li>
</ul>
接下来，一些 jQuery:
Next, some jQuery:
// Remove the todo item when clicked.
$('#todo').children().click(function () {
$(this).remove()
})
现在，如果我们添加一个待办事项怎么办?
Now, what if we add a todo?
$('#todo').append('<li>answer all the questions on SO</li>')
单击此待办事项不会将其从列表中删除，因为它没有绑定任何事件处理程序.相反，如果我们使用 .on，新项目将无需我们付出任何额外努力即可工作.下面是 .on 版本的样子:
Clicking this todo item will not remove it from the list, since it doesn't have any event handlers bound. If instead we'd used .on, the new item would work without any extra effort on our part. Here's how the .on version would look:
$('#todo').on('click', 'li', function (event) {
$(event.target).remove()
})
这篇关于jQuery:.click() 和 .on(“click") 之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
