jQuery 事件
# jQuery 事件
# 1. jQuery 事件注册
# 1.1 单个事件注册
element.事件(function(){})
$(“div”).click(function(){ 事件处理程序 })
// 其他常用事件和原生事件基本一致，比如：
// mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
1
2
3
4
5
2
3
4
5
# 2. jQuery 事件处理
# 2.1 事件处理 on() 绑定事件
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数。
语法：
element.on(events, [selector], fn)1参数：
events：一个或多个用空格分隔的事件类型，如 "click" 或 "keydown"。selector：可选，子元素选择器，用于事件委派。fn：回调函数，即绑定在元素身上的事件处理函数。
# 1-1 on() 方法的优势1
绑定多个事件和多个事件处理程序：
$('div').on({ mouseover: function() {}, mouseout: function() {}, click: function() {} }); // 如果事件处理程序相同 $('div').on("mouseover mouseout", function() { $(this).toggleClass("current"); });1
2
3
4
5
6
7
8
9
10
# 1-2 on() 方法的优势2
事件委派操作：把原本绑定在子元素上的事件绑定在父元素上，事件被委派到父元素。
$('ul').on('click', 'li', function() { alert('hello world!'); }); // 在此之前有 bind(), live() 和 delegate() 等方法来处理事件绑定或事件委派，推荐使用 on() 代替这些方法。1
2
3
4
5
# 1-3 on() 方法的优势3
动态创建的元素绑定事件：
click()方法无法绑定动态生成的元素事件，on()可以绑定。$('div').on("click", 'p', function() { alert("我可以给动态生成的元素绑定事件"); }); $("div").append($("<p>我是动态创建的p</p>"));1
2
3
4
5
# 2.2 事件处理 off() 解绑事件
off()方法可以移除通过on()方法添加的事件处理程序。$("p").off() // 解绑 p 元素所有事件处理程序 $("p").off("click") // 解绑 p 元素上的点击事件 $("ul").off("click", "li"); // 解绑事件委托1
2
3注意： 如果希望某事件只触发一次，可以使用
one()方法来绑定事件。
# 2.3 自动触发事件 trigger()
有些事件希望自动触发，比如轮播图自动播放功能与点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，而不必依靠鼠标点击。
语法：
element.click() // 简写形式 element.trigger("type") // 自动触发模式1
2
3$("p").on("click", function () { alert("hi~"); }); $("p").trigger("click"); // 自动触发点击事件，不需要鼠标点击1
2
3
4
5第三种自动触发模式
triggerHandler()：element.triggerHandler("type") // 注意：triggerHandler() 不会触发元素的默认行为，这是与前面两种的区别1
2
3
# 3. jQuery 事件对象
事件被触发时会产生事件对象，包含关于事件的详细信息。
语法：
element.on(events, [selector], function(event) { // 阻止默认行为： event.preventDefault(); // 或者 return false; // 阻止冒泡： event.stopPropagation(); });1
2
3
4
5
6
7
8
9事件对象常用属性和方法：
event.preventDefault()：阻止事件的默认行为。event.stopPropagation()：阻止事件冒泡。
# 4. 综合示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 事件处理示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 单个事件注册
$("button").click(function() {
alert("Button clicked!");
});
// on() 方法绑定多个事件
$("div").on({
mouseover: function() {
$(this).css("background-color", "yellow");
},
mouseout: function() {
$(this).css("background-color", "lightgray");
},
click: function() {
$(this).css("background-color", "red");
}
});
// 事件委派
$("ul").on("click", "li", function() {
alert($(this).text());
});
// 解绑事件
$("#unbind").click(function() {
$("div").off("mouseover mouseout click");
alert("Events unbound!");
});
// 自动触发事件
$("#trigger").click(function() {
$("button").trigger("click");
});
});
</script>
<style>
div {
width: 100px;
height: 100px;
background-color: lightgray;
margin: 20px;
text-align: center;
line-height: 100px;
}
ul {
list-style-type: none;
}
li {
cursor: pointer;
margin: 5px;
}
</style>
</head>
<body>
<button>Click me</button>
<button id="unbind">Unbind Events</button>
<button id="trigger">Trigger Click</button>
<div>Hover or Click</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
编辑此页 (opens new window)