事件监听：用户交互的核心机制
在前端开发中，事件监听是处理用户交互的基础机制。它允许我们检测用户的操作（如点击、输入、滚动等）并执行相应的代码，让网页从静态变为动态。
一、事件与事件监听的基本概念
- 事件（Event）：指用户在页面上的操作或浏览器自身的状态变化（如页面加载完成、窗口大小改变）
- 事件监听（Event Listener）：一种机制，让程序 "等待" 特定事件发生，当事件发生时执行预设的处理函数
简单来说：事件监听就是 "当... 发生时，做..." 的逻辑实现。
二、常见的事件类型
1. 鼠标事件
click：鼠标点击元素dblclick：鼠标双击元素mousedown：鼠标按下mouseup：鼠标松开mouseover：鼠标移入元素mouseout：鼠标移出元素mousemove：鼠标在元素上移动
2. 键盘事件
keydown：按下键盘按键keyup：松开键盘按键keypress：按下并释放按键（已逐渐被弃用）
3. 表单事件
submit：表单提交change：表单元素值改变（如下拉框选择变化）input：输入框内容变化focus：元素获得焦点blur：元素失去焦点
4. 窗口事件
load：页面完全加载完成resize：窗口大小改变scroll：页面滚动unload：页面关闭或刷新
三、事件监听的三种实现方式
1. HTML 属性方式（不推荐）
直接在 HTML 标签中通过on+事件名属性定义：
html
预览
<button onclick="handleClick()">点击我</button><script>function handleClick() {alert('按钮被点击了');}
</script>
缺点：HTML 与 JavaScript 代码混合，不利于维护。
2. DOM 属性方式
通过 JavaScript 为 DOM 元素的事件属性赋值：
html
预览
<button id="myBtn">点击我</button><script>const btn = document.getElementById('myBtn');btn.onclick = function() {alert('按钮被点击了');};// 可以覆盖之前的事件处理btn.onclick = function() {alert('新的点击处理');};
</script>
缺点：同一个事件只能绑定一个处理函数，新的会覆盖旧的。
3. addEventListener () 方法（推荐）
使用 DOM 标准方法addEventListener()绑定事件：
html
预览
<button id="myBtn">点击我</button><script>const btn = document.getElementById('myBtn');// 绑定事件btn.addEventListener('click', function() {alert('第一次点击处理');});// 可以绑定多个处理函数btn.addEventListener('click', function() {console.log('第二次点击处理');});// 定义命名函数便于移除function handleClick() {console.log('命名函数处理');}btn.addEventListener('click', handleClick);// 移除事件监听btn.removeEventListener('click', handleClick);
</script>
优点：
- 可以为同一事件绑定多个处理函数
- 可以方便地移除事件监听
- 可以指定事件捕获 / 冒泡阶段
四、事件对象（Event Object）
当事件发生时，浏览器会自动创建一个事件对象，包含事件相关的详细信息，并作为参数传递给事件处理函数：
javascript
运行
btn.addEventListener('click', function(event) {// event 就是事件对象console.log('事件类型:', event.type); // "click"console.log('触发元素:', event.target); // 触发事件的元素console.log('当前元素:', event.currentTarget); // 绑定事件的元素console.log('鼠标X坐标:', event.clientX); // 相对于视口的X坐标console.log('鼠标Y坐标:', event.clientY); // 相对于视口的Y坐标
});
常用属性：
type：事件类型（如 "click"）target：触发事件的原始元素currentTarget：当前处理事件的元素（通常与this相同）preventDefault()：阻止事件的默认行为（如链接跳转、表单提交）stopPropagation()：阻止事件冒泡
五、事件流：捕获与冒泡
DOM 事件流分为三个阶段：
- 捕获阶段：事件从 window 向下传播到目标元素
- 目标阶段：事件到达目标元素
- 冒泡阶段：事件从目标元素向上传播回 window
html
预览
<div id="outer"><div id="inner">点击我</div>
</div><script>const outer = document.getElementById('outer');const inner = document.getElementById('inner');// 第三个参数为true表示在捕获阶段处理outer.addEventListener('click', () => console.log('outer捕获'), true);inner.addEventListener('click', () => console.log('inner目标'));outer.addEventListener('click', () => console.log('outer冒泡'), false);
</script>
点击 inner 元素会输出：
outer捕获
inner目标
outer冒泡
六、事件委托（事件代理）
利用事件冒泡机制，将子元素的事件委托给父元素处理：
html
预览
<ul id="myList"><li>项目1</li><li>项目2</li><li>项目3</li>
</ul><script>const list = document.getElementById('myList');// 只给父元素绑定一次事件list.addEventListener('click', function(event) {// 判断点击的是li元素if (event.target.tagName === 'LI') {console.log('点击了:', event.target.textContent);}});
</script>
优点：
- 减少事件绑定数量，提高性能
- 自动支持动态添加的子元素
七、实际应用示例
综合运用事件监听实现一个简单的交互功能：
html
预览
<div class="counter"><button class="decrease">-</button><span class="value">0</span><button class="increase">+</button>
</div><script>const decreaseBtn = document.querySelector('.decrease');const increaseBtn = document.querySelector('.increase');const valueSpan = document.querySelector('.value');let count = 0;// 定义处理函数function updateValue() {valueSpan.textContent = count;}// 绑定事件decreaseBtn.addEventListener('click', () => {count--;updateValue();});increaseBtn.addEventListener('click', () => {count++;updateValue();});// 支持键盘操作document.addEventListener('keydown', (event) => {if (event.key === '+') {count++;updateValue();} else if (event.key === '-') {count--;updateValue();}});
</script>
总结
事件监听是前端交互的核心，掌握以下几点：
- 理解事件的概念和常见事件类型
- 推荐使用
addEventListener()方法绑定事件 - 学会使用事件对象获取事件信息和控制事件行为
- 理解事件流的捕获和冒泡机制
- 掌握事件委托技巧提高性能
)
