jQuery 是一款广泛使用的 JavaScript 库，它提供了许多方便的方法来操作 DOM 元素。在 jQuery 中，有两种常用的绑定点击事件的方式，分别是 .click() 和 .on("click")。本文将介绍它们之间的区别，以及何时使用哪种方式。
.click()
.click() 是 jQuery 提供的一个方法，用于绑定元素的点击事件。这个方法比较简单，只需要传入一个回调函数即可：
$("#myButton").click(function() {
console.log("Clicked!");
});这个例子中，当 ID 为 myButton 的元素被点击时，控制台会输出 "Clicked!"。
.click() 方法的优点是它简单易用，适合简单的事件处理。但是它也有一些缺点，比如无法动态地添加和删除事件处理程序、无法同时绑定多个事件处理程序等。
.on("click")
.on("click") 是 jQuery 提供的另一个方法，用于绑定元素的点击事件。和 .click() 不同，.on("click") 可以更灵活地处理事件。例如，可以使用 .on("click") 动态地添加和删除事件处理程序：
// 添加事件处理程序
$("#myButton").on("click", function() {
console.log("Clicked!");
});
// 删除事件处理程序
$("#myButton").off("click");.on("click") 还可以同时绑定多个事件处理程序：
$("#myButton").on("click", function() {
console.log("Clicked!");
});
$("#myButton").on("click", function() {
alert("Clicked!");
});这个例子中，当 ID 为 myButton 的元素被点击时，控制台会输出 "Clicked!"，同时弹出一个提示框。
何时使用哪种方式
一般来说，如果只需要简单地绑定一个点击事件，可以使用 .click() 方法；如果需要更灵活的事件处理，例如动态添加和删除事件处理程序、同时绑定多个事件处理程序等，应该使用 .on("click") 方法。此外，.on("click") 还可以处理其他类型的事件，例如鼠标移动、键盘按键等。
总之，对于大多数情况下的点击事件处理，两种方法没有太大区别，但是在需要更复杂的事件处理时，.on("click") 是更好的选择。
示例代码
以下是一个示例代码，演示了如何使用 .on("click") 绑定一个点击事件，并动态地添加和删除事件处理程序：
-- -------------------- ---- -------
--------- -----
------
------
-------------- -------- - ------------ -----------
------- ---------------------------------------------------------------------------------
--------
---------------------------- -
-- -------------
-------------------------- ---------- -
-------------------- -----
---
-- -----------
--------------------------- ---------- -
-------------------------- ---------- -
-------------------- -----
---
---
-- ----------
------------------------------ ---------- -
----------------------------
---
---
---------
-------
------
------- ------------------- ------------
--------
------- ------------------ ----- ----------------
------- ------------------------ --- ----- -----------------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31138