jQuery 事件学习笔记
jQuery是JavaScript库中最流行的之一，它被广泛用于网页交互和动态效果的实现。事件是jQuery中至关重要的概念之一，允许我们在页面上监听用户交互并采取相应的行动。
事件绑定
事件绑定是将一个或多个事件处理程序附加到特定的元素上，以便在特定事件发生时执行某些操作。jQuery提供了.on()方法来绑定事件处理程序。
javascriptCopy Code$(selector).on(event, function)
其中selector为所选元素的选择器，event为要绑定的事件类型，function为事件处理程序。
例如，我们可以将一个单击事件绑定到所有按钮上：
javascriptCopy Code$("button").on("click", function() {
alert("Button clicked!");
});
事件触发
触发事件是手动调用已经绑定的事件处理程序。这在需要在不使用鼠标的情况下通过编程触发事件时非常有用。
javascriptCopy Code$(selector).trigger(event)
例如，我们可以手动触发按钮的单击事件：
javascriptCopy Code$("button:first").trigger("click");
事件委托
事件委托是一种高效的事件处理方式，在大型网页中特别有用。其原理是将事件处理程序绑定到父元素上，以便在子元素上触发事件时执行相应的操作。
javascriptCopy Code$(parentSelector).on(event, childSelector, function)
其中parentSelector为父元素的选择器，childSelector为子元素的选择器，event和function与之前的绑定方式相同。
例子：
htmlCopy Code<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
$("#list").on("click", "li", function() {
alert($(this).text());
});
</script>
在这个例子中，我们将单击事件绑定到ul元素上，但只有当单击子元素li时才会触发事件。这样可以避免将多个事件处理程序绑定到每个子元素上，提高了性能。
实例
以下是一个例子，演示了如何在单击按钮时改变文本颜色：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>jQuery Event Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#text {
font-size: 24px;
color: black;
}
</style>
</head>
<body>
<div id="container">
<p id="text">Hello, world!</p>
<button id="button">Change color</button>
</div>
<script>
$(document).ready(function() {
$("#button").on("click", function() {
$("#text").css("color", "red");
});
});
</script>
</body>
</html>
在这个例子中，当单击按钮时，我们使用.css()方法将文本颜色更改为红色。请注意，我们将事件处理程序绑定到按钮上，因此只有单击按钮时才会触发事件。