6.1 事件对象
JavaScript 提供了强大的事件系统，可以追踪用户的各种操作和浏览器中发生的其他事件。处理事件时，重要的一点就是事件对象，它包含事件的信息并提供方法来处理事件。
当事件发生时，浏览器会创建一个事件对象，其中包含关于该事件的信息。这个对象会作为参数传递给事件处理器。
事件对象的属性：
type: 事件类型 (例如，click，keydown)。target: 事件发生的元素。currentTarget: 绑定事件处理器的元素。eventPhase: 事件所处的阶段（捕获、目标、冒泡）。bubbles: 布尔值，表示事件是否可以冒泡。cancelable: 布尔值，表示事件是否可以取消。defaultPrevented: 布尔值，表示默认操作是否已被阻止。timeStamp: 事件创建的时间。isTrusted: 布尔值，表示事件是由用户还是脚本触发的。
事件对象的方法：
preventDefault(): 阻止与事件关联的默认操作。stopPropagation(): 阻止事件的进一步传播。stopImmediatePropagation(): 阻止事件的进一步传播并阻止当前元素的其他事件处理器执行。
事件对象的使用示例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>Event Object Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Event type:', event.type); // 输出: click
console.log('Event target:', event.target); // 输出: <button id="myButton">Click me</button>
console.log('Current target:', event.currentTarget); // 输出: <button id="myButton">Click me</button>
console.log('Event phase:', event.eventPhase); // 输出: 2 (目标阶段)
console.log('Bubbles:', event.bubbles); // 输出: true
console.log('Cancelable:', event.cancelable); // 输出: true
console.log('Time stamp:', event.timeStamp); // 输出毫秒
console.log('Is trusted:', event.isTrusted); // 输出: true
});
</script>
</body>
</html>
6.2. 点击事件 (Mouse Events)
鼠标事件是在用户通过鼠标与元素交互时生成的：
click: 点击事件dblclick: 双击事件mousedown: 鼠标按下事件mouseup: 鼠标释放事件mousemove: 鼠标移动事件mouseover: 鼠标悬停事件mouseout: 鼠标离开事件
示例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events Example</title>
</head>
<body>
<button id="myButton">Click Me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Button clicked');
console.log('Event type:', event.type);
console.log('Target element:', event.target);
});
</script>
</body>
</html>
6.3 加载事件 (Load Events)
加载事件发生在资源加载完毕时：
load: 当资源/页面完全加载后发生的事件DOMContentLoaded: 当初始HTML文档被加载和解析后（不等待CSS、图像、框架等加载完）发生的事件
示例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>Load Events Example</title>
</head>
<body>
<script>
window.addEventListener('load', function(event) {
console.log('Window fully loaded');
});
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM fully loaded and parsed');
});
</script>
</body>
</html>
6.4 焦点事件 (Focus Events)
焦点事件是在元素获得或失去焦点时生成的。
focus: 在元素获取焦点时发生的事件blur: 在元素失去焦点时发生的事件
示例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>Focus Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('focus', function(event) {
console.log('Input field focused');
});
input.addEventListener('blur', function(event) {
console.log('Input field lost focus');
});
</script>
</body>
</html>
6.5 键盘事件 (Keyboard Events)
键盘事件在用户按下键盘时生成：
keydown: 按键按下时发生的事件keyup: 按键释放时发生的事件keypress: 按键按下和释放时发生的事件（已废弃，不推荐使用）
示例：
HTML
<html>
<head>
<title>Keyboard Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('keydown', function(event) {
console.log('Key down:', event.key);
});
input.addEventListener('keyup', function(event) {
console.log('Key up:', event.key);
});
</script>
</body>
</html>
GO TO FULL VERSION