Javascript--事件
一.事件监听：
让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数响应，也称为注册事件
事件监听三要素：
1.事件源：谁被触发
2.事件类型：用什么方式触发，点击还是鼠标经过等
3.事件处理程序：要做什么事情
<button>点击</button>
<script>//需求：点击按钮弹出对话框//1.事件源 按钮//2.事件类型 点击//3.事件处理程序 弹出对话框const btn=document.querySelector('botton')btn.addEventListener('click',function(){alert('你好')})
</script>
二.随机点名案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {display: flex;width: 200px;height: 150px;margin: 0 auto;}.btn {padding: auto;display: flex;justify-content: center;gap: 30px}</style>
</head><body><h2 style="text-align: center;">随机点名</h2><div class="box"><span>名字是:</span><div class="qs" style="color: red;">这里显示姓名</div></div><div class="btn"><button class="start">开始</button><button class="end">结束</button></div><script>const arr = ['a', 'b', 'c', 'd', 'e']let n = 0let random = 0const start = document.querySelector('.start')const qs = document.querySelector('.qs')start.addEventListener('click', function () {n = setInterval(function () {random = parseInt(Math.random() * arr.length)qs.innerHTML = arr[random]}, 50)})if (arr.length == 0) start.disabled = end.disabled = trueconst end = document.querySelector('.end')end.addEventListener('click', function () {clearInterval(n)arr.splice(random, 1)})</script>
</body></html>
三.鼠标监听事件
| 事件名 | 触发时机 | 应用 |
|---|---|---|
click | 单击 | 按钮交互、表单提交 |
mousedown | 按下鼠标 | 拖拽开始、绘制工具 |
mouseup | 释放鼠标 | 拖拽结束、完成选择 |
mouseenter | 鼠标进入元素 | 悬停效果、导航菜单展开 |
mouseleave | 鼠标离开元素 | 悬停效果消失、菜单收起 |
mousemove | 鼠标在元素上移动 | 实时交互、鼠标跟随效果 |
contextmenu | 右键点击 | 自定义菜单、功能扩展 |
四.焦点事件
1. 核心焦点事件
（1）获得焦点事件
focus：元素获得焦点时触发（不冒泡）。focusin：元素获得焦点时触发（冒泡）。
（2）失去焦点事件
blur：元素失去焦点时触发（不冒泡）。focusout：元素失去焦点时触发（冒泡）。
2. 触发焦点的方式
- 键盘操作：通过 Tab 键在可聚焦元素间切换。
- 鼠标点击：点击可聚焦元素（如输入框、按钮）。
- JavaScript：通过
element.focus()或element.blur()方法。
3. 示例
（1）基本监听
const input = document.getElementById('username');// 获得焦点时添加高亮效果
input.addEventListener('focus', () => {input.style.borderColor = 'blue';
});// 失去焦点时恢复样式
input.addEventListener('blur', () => {input.style.borderColor = '';
});
（2）使用冒泡事件（focusin/focusout）
const form = document.getElementById('myForm');// 监听表单内所有元素的焦点变化
form.addEventListener('focusin', (event) => {event.target.classList.add('focused');
});form.addEventListener('focusout', (event) => {event.target.classList.remove('focused');
});
| 事件类型 | 触发时机 | 冒泡特性 |
|---|---|---|
focus/blur | 元素获得/失去焦点时 | 不冒泡 |
focusin/focusout | 元素获得/失去焦点时 | 冒泡 |
click | 鼠标点击或 Enter/Space 键 | 冒泡 |
五.键盘事件
1. 核心键盘事件
（1）按键触发顺序
keydown：按下任意键时触发（重复按下会持续触发）。keypress：按下可打印字符键时触发（已逐渐被弃用，推荐使用keydown）。keyup：释放按键时触发。
（2）事件触发时机
keydown和keypress：在按键被按下时触发，可能早于字符输入到输入框。keyup：在按键释放后触发，常用于获取最终输入结果。
2. 事件对象属性
键盘事件触发时传递的事件对象（event）包含以下常用属性：
-
按键标识：
key：按键的字符串表示（如'A'、'Enter'、'ArrowUp'）。code：按键的物理位置（如'KeyA'、'Enter'、'ArrowUp'）。keyCode：已弃用，建议使用key或code。
-
修饰键状态：
ctrlKey、shiftKey、altKey、metaKey：是否按下对应修饰键。
-
特殊标志：
repeat：是否为重复按键（持续按住时）。
3. 事件监听示例
（1）监听全局键盘事件
document.addEventListener('keydown', (event) => {console.log('按下键:', event.key);// 检测组合键（Ctrl+C）if (event.ctrlKey && event.key === 'c') {console.log('复制操作');}// 阻止默认行为（如禁止空格键滚动页面）if (event.key === ' ') {event.preventDefault();}
});
（2）输入框特定按键处理
const input = document.getElementById('search');input.addEventListener('keydown', (event) => {// 按下 Enter 键时提交搜索if (event.key === 'Enter') {performSearch(input.value);}
});
（3）方向键控制
document.addEventListener('keydown', (event) => {switch (event.key) {case 'ArrowUp':moveUp();break;case 'ArrowDown':moveDown();break;case 'ArrowLeft':moveLeft();break;case 'ArrowRight':moveRight();break;}
});
4. 应用场景
（1）快捷键功能
// 全局监听 Ctrl+S（保存）
document.addEventListener('keydown', (event) => {if ((event.ctrlKey || event.metaKey) && event.key === 's') {event.preventDefault(); // 阻止浏览器默认保存saveDocument();}
});
（2）游戏控制
const player = document.getElementById('player');
let position = 0;document.addEventListener('keydown', (event) => {if (event.key === 'd') {position += 10;player.style.left = `${position}px`;}
});
（3）表单输入过滤
const numberInput = document.getElementById('age');numberInput.addEventListener('keydown', (event) => {// 只允许数字、Backspace、Delete 等const allowedKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight'];if (!allowedKeys.includes(event.key)) {event.preventDefault(); // 阻止非数字输入}
});
| 按键类型 | key 值示例 | code 值示例 |
|---|---|---|
| 字母键 | 'A', 'B', 'a', 'b' | 'KeyA', 'KeyB' |
| 数字键 | '1', '2' | 'Digit1', 'Digit2' |
| 方向键 | 'ArrowUp', 'ArrowDown' | 'ArrowUp', 'ArrowDown' |
| 功能键 | 'Enter', 'Escape' | 'Enter', 'Escape' |
| 修饰键 | 'Control', 'Shift' | 'ControlLeft', 'ShiftRight' |
| 事件类型 | 触发时机 | 典型应用 |
|---|---|---|
keydown | 按下任意键 | 快捷键、游戏控制、输入过滤 |
keyup | 释放任意键 | 获取最终输入结果 |
keypress | 按下可打印字符键 | 已逐渐被弃用，推荐使用 keydown |
六.文本事件
1. 核心文本事件
（1）输入事件
input：元素内容改变时触发（实时监听，包括键盘输入、粘贴、拖放等）。change：元素失去焦点且内容已改变时触发（常用于表单控件）。
（2）组合输入事件（处理输入法）
compositionstart：开始输入法组合（如输入中文拼音时）。compositionupdate：输入法组合过程中。compositionend：输入法组合结束（生成最终文本）。
（3）选择事件
select：文本被选中时触发（仅适用于文本框、文本区域等）。
2. 示例
（1）实时输入监听
const input = document.getElementById('message');input.addEventListener('input', (event) => {const value = event.target.value;console.log('当前输入:', value);// 实时字数统计document.getElementById('counter').textContent = `${value.length}/140`;
});
（2）组合输入处理
let isComposing = false;input.addEventListener('compositionstart', () => {isComposing = true;
});input.addEventListener('compositionend', (event) => {isComposing = false;console.log('组合输入完成:', event.data);
});// 避免在输入法组合过程中触发逻辑
input.addEventListener('input', (event) => {if (!isComposing) {processInput(event.target.value);}
});
（3）文本选择监听
const textarea = document.getElementById('editor');textarea.addEventListener('select', () => {const selection = textarea.value.substring(textarea.selectionStart,textarea.selectionEnd);console.log('选中的文本:', selection);
});
3. 应用场景
（1）实时搜索建议
const searchInput = document.getElementById('search');searchInput.addEventListener('input', (event) => {const query = event.target.value;if (query.length > 2) {fetchSuggestions(query);}
});
（2）表单验证
const emailInput = document.getElementById('email');emailInput.addEventListener('input', (event) => {const isValid = validateEmail(event.target.value);if (isValid) {emailInput.classList.remove('error');} else {emailInput.classList.add('error');}
});
（3）富文本编辑器
const editor = document.getElementById('rich-editor');editor.addEventListener('input', () => {// 实时保存草稿saveDraft(editor.innerHTML);
});editor.addEventListener('select', () => {// 更新格式工具栏状态updateToolbarState();
});
| 事件名 | 触发时机 | 典型应用 |
|---|---|---|
input | 内容实时变化 | 实时搜索、字数统计、表单验证 |
change | 失去焦点且内容已改变 | 表单提交前的最终验证 |
compositionstart | 开始输入法组合 | 输入法状态管理 |
compositionend | 输入法组合结束 | 处理非直接输入的最终结果 |
select | 文本被选中 | 富文本编辑器格式工具栏 |
在前端开发中，事件对象（Event Object） 是 JavaScript 在触发事件时自动创建的对象，它包含了与事件相关的所有信息（如事件类型、触发位置、按键状态等）。以下是事件对象的核心概念、常见属性及应用场景：
1. 事件对象的获取
当事件监听器被触发时，JavaScript 会自动传递一个事件对象（通常命名为 event 或 e）给回调函数：
document.addEventListener('click', (event) => {console.log('事件对象:', event);
});
2. 核心属性
（1）事件类型与目标
type：事件类型（如'click'、'keydown'）。target：触发事件的最内层元素（如点击的按钮）。currentTarget：绑定事件监听器的元素（可能是父元素）。
（2）位置信息
-
鼠标事件：
clientX、clientY：相对于浏览器视口的坐标。pageX、pageY：相对于文档的坐标（包含滚动距离）。screenX、screenY：相对于屏幕的坐标。
-
键盘事件：
key：按下的键（如'Enter'、'A'）。code：按键的物理位置（如'KeyA'、'Enter'）。
（3）修饰键状态
ctrlKey、shiftKey、altKey、metaKey：是否按下对应修饰键（如 Ctrl+C）。
（4）其他属性
preventDefault()：阻止事件的默认行为（如阻止表单提交、链接跳转）。stopPropagation()：阻止事件冒泡到父元素。stopImmediatePropagation()：阻止事件冒泡并取消同元素后续相同类型事件的监听。
3. 应用场景
（1）事件委托
利用 target 属性在父元素监听子元素事件：
document.getElementById('parent').addEventListener('click', (event) => {if (event.target.classList.contains('child')) {console.log('子元素被点击:', event.target.textContent);}
});
（2）阻止默认行为
// 阻止表单提交
document.getElementById('form').addEventListener('submit', (event) => {event.preventDefault(); // 阻止表单默认提交handleFormSubmit();
});// 阻止右键菜单
document.addEventListener('contextmenu', (event) => {event.preventDefault(); // 阻止浏览器默认右键菜单showCustomMenu();
});
（3）鼠标位置跟踪
document.addEventListener('mousemove', (event) => {console.log(`鼠标位置: (${event.clientX}, ${event.clientY})`);
});
（4）键盘快捷键
document.addEventListener('keydown', (event) => {// Ctrl+S 保存if (event.ctrlKey && event.key === 's') {event.preventDefault(); // 阻止浏览器默认保存saveDocument();}
});
5. 事件对象的类型
不同类型的事件会创建不同的事件对象，常见的有：
| 事件类型 | 事件对象类 | 核心属性示例 |
|---|---|---|
| 鼠标事件 | MouseEvent | clientX, button, target |
| 键盘事件 | KeyboardEvent | key, code, ctrlKey |
| 输入事件 | InputEvent | data, inputType, target |
| 触摸事件 | TouchEvent | touches, changedTouches |
| 滚动事件 | WheelEvent | deltaX, deltaY |
总结
- 获取事件详情：如鼠标位置、按键信息。
- 控制事件行为：阻止默认行为、停止冒泡。
- 实现复杂交互：如事件委托、组合键检测。