jQuery 事件触发来源
在使用 jQuery 进行开发时，我们常常需要对页面上的元素进行事件绑定和响应。了解事件触发来源对于开发者来说非常重要，因为它决定了事件绑定的对象和事件触发的方式。本文将介绍 jQuery 中事件触发来源的相关知识，并提供代码示例来帮助理解。
事件触发来源概述
在 jQuery 中，事件触发来源可以是以下几种方式：
- 直接选择器绑定：通过选择器绑定事件，事件可以直接由选择器选中的元素触发。
- 间接选择器绑定：通过选择器选中的元素作为父元素，利用事件冒泡的机制，子元素触发事件会冒泡到父元素上。
- 动态创建元素绑定：通过动态创建元素，并绑定事件，事件由动态创建的元素触发。
- 事件代理：通过给父元素绑定事件，并指定事件代理的子元素选择器，事件由子元素触发，但是事件处理函数是绑定在父元素上的。
下面我们将详细介绍每种事件触发来源的示例和代码。
直接选择器绑定
直接选择器绑定是最常见的事件触发来源，通过选择器选中元素，然后绑定事件。示例如下：
$("#button").click(function(){
// 事件处理函数
});
上述代码中，选择器 #button 选中了 id 为 button 的元素，并绑定了 click 事件。当点击该元素时，事件处理函数会被触发。
间接选择器绑定
间接选择器绑定是利用事件冒泡的机制，通过选择器选中元素的父元素，然后监听父元素上的事件。示例如下：
$("#parent").on("click", "#button", function(){
// 事件处理函数
});
上述代码中，选择器 #parent 选中了 id 为 parent 的元素作为父元素，然后监听父元素上的 click 事件。当子元素中的 id 为 button 的元素被点击时，事件处理函数会被触发。
动态创建元素绑定
动态创建元素绑定是指在代码中动态创建元素，并绑定事件。示例如下：
$("<button>").appendTo("#container").click(function(){
// 事件处理函数
});
上述代码中，通过 $("<button>") 动态创建了一个 button 元素，并将其添加到 id 为 container 的元素中。然后给这个动态创建的元素绑定了 click 事件。当点击该元素时，事件处理函数会被触发。
事件代理
事件代理是指通过给父元素绑定事件，并指定事件代理的子元素选择器，来监听子元素上的事件。示例如下：
$("#parent").on("click", "#button", function(){
// 事件处理函数
});
上述代码中，选择器 #parent 选中了 id 为 parent 的元素作为父元素，并监听其上的 click 事件。然后通过子元素选择器 #button 指定了事件代理的子元素。当子元素中的 id 为 button 的元素被点击时，事件处理函数会被触发。
状态图
下面是一个简化的状态图，展示了事件触发来源的几种情况：
stateDiagram
[*] --> 直接选择器绑定
[*] --> 间接选择器绑定
[*] --> 动态创建元素绑定
[*] --> 事件代理
类图
下面是一个简化的类图，展示了 jQuery 中的事件绑定相关类和方法的关系：
classDiagram
class jQuery {
bind()
unbind()
on()
off()
}
class Event {
target
currentTarget
}
class Selector {
select()
}
