jquery事件添加的方式有：1、直接在标签上使用 JavaScript，代码简洁易懂无需引入其他库或文件；2、使用“onclick”“onmouseover”等方法，可以重新组织到一个单独的 JavaScript 文件中，更易于管理和共享；3、“.bind()”绑定事件，可以绑定多个事件处理程序到单个元素；4、“.on()”绑定事件，支持委托事件处理程序可以减少代码复杂度。
本教程操作系统：Windows10系统、jQuery3.6.0版本、Dell G3电脑。
jQuery 提供了许多添加事件处理程序的方式，这里主要介绍其中的四种方式：
1. 直接在标签上使用 JavaScript
```HTML
<button onclick="alert('Hello world!')">Click Me</button>
```优点：
代码简洁易懂
无需引入其他库或文件
缺点：
不利于维护和复用
耦合度高，JavaScript 和 HTML 代码混杂在一起
2. 使用元素方法 `onclick` / `onmouseover` 等等
```HTML
<button id="foo">Click Me</button>
```
```javascript
$('#foo').click(function() {
alert('Hello world!');
});
```优点：
与直接在标签上使用 JavaScript 相比，代码可以重新组织到一个单独的 JavaScript 文件中，更易于管理和共享
支持链式调用
缺点：
如果有大量的事件和处理程序需要设置，则此方法可能变得冗长和难以维护
对象方法将事件依赖于对象本身的生命周期
3. 使用 `.bind()` 绑定事件
```HTML
<button id="foo">Click Me</button>
```
```javascript
var foo = function() {
alert('Hello world!');
};
$('#foo').bind('click', foo);
```优点：
可以绑定多个事件处理程序到单个元素
`$.bind()` 和 `$.unbind()` 方法可用于监控事件注册/注销流程
缺点：
在 jQuery 版本 3.0 中已经废弃了 `.bind()`, 推荐使用 `.on()`
4. 使用 `.on()` 绑定事件
以下是使用jQuery的`.on()`方法进行事件绑定的示例代码：
```javascript
$(document).on('click', '#myButton', function() {
// 事件处理程序
});
````.on()` 方法可以接受三个参数。第一个参数是要监听/绑定的事件类型；第二个参数是可选的选择器字符串或 DOM 节点，用于限制响应的元素集合；第三个参数是回调函数，即事件发生时要执行的动作。
优点：
`.on()` 方法允许你为非常灵活地为文档/元素添加多个事件处理程序。
可以通过 `off()` 方法移除所添加的事件处理程序。
`.on()` 方法还支持委托事件处理程序，在大量操作元素或动态添加元素时会极大地减少代码的复杂度。
缺点：
根据附加的事件和元素数量，直接绑定很多事件处理程序可能会导致性能问题。
在 jQuery 版本低于 1.7 的旧代码中无法使用`.on()`, 需要使用其它方法如 `.bind()` （需要注意 该方法以后也将被废弃） 和 `.delegate()`。
