jQuery 是一种常用的 JavaScript 库，它为前端开发人员提供了许多简单易用的方法。其中最常见的是 click() 和 on() 方法，它们都可以用于处理用户交互事件，如鼠标点击、鼠标移动和键盘敲击等。虽然这两个方法在表面上看起来相似，但实际上它们有一些重要的区别。
click() 方法
click() 方法是 jQuery 最基本的事件方法之一。它被用来绑定一个单击事件到一个元素上。例如：
$('#myButton').click(function() {
alert('Button clicked!');
});上面的代码将在元素 ID 为 “myButton” 的按钮被单击时弹出一个警告框。但是，如果您想绑定多个事件处理程序，您需要使用多个 click() 方法。这可能会导致代码显得混乱而难以维护。
on() 方法
on() 方法是 click() 方法的替代方案。它比 click() 更加灵活和强大，并且可以用来管理多个事件处理程序。例如：
$('#myButton').on('click', function() {
alert('Button clicked!');
});
$('#myButton').on('mouseenter mouseleave', function() {
$(this).toggleClass('hover');
});上面的代码将在元素 ID 为 “myButton” 的按钮被单击时弹出一个警告框。同时，当鼠标移入或移出按钮时，该按钮的类将被切换。
此外，on() 方法还可以用于处理动态添加的元素。例如，在以下代码中，新的按钮将在单击之后被添加到文档中：
$('#myButton').on('click', function() {
$('<button>New Button</button>').appendTo('body');
});上面的代码将在单击 ID 为 “myButton” 的按钮时，在页面中添加一个新的按钮。
总结
虽然 click() 方法和 on() 方法都可以用来处理用户交互事件，但是 on() 方法更加灵活和强大，并且可以用来管理多个事件处理程序。此外，on() 方法还可以用于处理动态添加的元素，从而使代码更加易于维护和扩展。
因此，建议在开发中尽量使用 on() 方法，以便更好地控制事件处理程序的管理和维护。
示例代码：
HTML：
<button id="myButton">Click me!</button>
CSS:
.hover {
background-color: yellow;
}jQuery:
-- -------------------- ---- ------- -- ------- ---- ------------------------------- - ------------- ----------- --- -- ---- ---- -------------------------- ---------- - ------------- ------- ---- ---- ---------- --- ----------------------------- ------------ ---------- - ----------------------------- --- --------------------------- ---------- - -------------- ----------------------------------- ---
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9412
