gpt4 book ai didi

javascript - jQuery: .click() 和 .on ("click"之间的区别)

转载 作者:行者123 更新时间:2023-12-03 21:35:52 24 4
gpt4 key购买 nike

我经常用

$(selector).click(...

但有些人建议我改用这个:

$(selector).on("click", function(...

$(selector).live("click"...(已弃用)

我读了手册,但我初学者的头脑无法理解它。我对他们使用的所有术语感到困惑。我仍然不知道区别也不知道为什么要使用 .on()
http://api.jquery.com/on/

最佳答案

最终,每个事件都会绑定(bind)到 DOM 中的某个元素。以.bind为例,您将直接绑定(bind)到 jQuery 对象中的一个或多个元素。例如,如果您的 jQuery 对象包含 100 个元素,则您将绑定(bind) 100 个事件监听器。

.live为例, .delegate ,和.on ,一个单个事件监听器被绑定(bind),通常在 DOM 树中最顶层的节点之一上:document , document.documentElement (<html> 元素),或 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()
})

关于javascript - jQuery: .click() 和 .on ("click"之间的区别),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8018760/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com