jQuery中的on与bind绑定事件区别实例详解

理解并区分jQuery中的`bind`与`on`方法，特别是它们在事件冒泡方面的差异，对于开发者来说是非常重要的。接下来，我将以更生动的语言和丰富的文体，通过实例详细讲解这两者之间的区别。

我们先来看看`on`方法和`bind`方法的基本用法和参数。

`on(events, [selector], [data], fn)`：

`events`：一个或多个用空格分隔的事件类型和可选的命名空间，例如"click"或"keydown.myPlugin"。

`selector`：一个选择器字符串，用于选择触发事件的后代元素。

`data`：当事件被触发时，传递给事件处理函数的`event.data`。

`fn`：当事件被触发时执行的函数。

而`bind(type, [data], fn)`是jQuery 3.0之前版本中使用的方法，用于为匹配元素的特定事件绑定事件处理函数。但在jQuery 3.0中，这个方法已经被弃用，推荐使用`on()`方法替代。尽管其基本参数类型与`on()`相同，但在事件冒泡方面存在显著差异。

让我们通过三个示例来深入理解这两者的区别：

示例一： 使用`on()`方法和不使用`selector`属性的情况。点击相应的li元素弹出其内容。在此例中，使用`on()`替换`bind()`并没有任何区别。

```html

• 1
• 2
• 3

```

示例二： 使用`bind()`方法的情况。在这种情况下，如果你动态添加一个li元素，点击这个新元素时，它不会触发绑定的事件。也就是说，`bind()`不具备动态绑定事件的能力。这是因为使用`bind()`绑定的事件是直接绑定在元素上的，新添加的元素不会继承这些绑定。

```html

```