学习笔记：Javascript（5）——事件监听（用户交互）

事件监听：用户交互的核心机制

在前端开发中，事件监听是处理用户交互的基础机制。它允许我们检测用户的操作（如点击、输入、滚动等）并执行相应的代码，让网页从静态变为动态。

一、事件与事件监听的基本概念

事件（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

预览

html 复制代码

<button onclick="handleClick()">点击我</button>

<script>
  function handleClick() {
    alert('按钮被点击了');
  }
</script>

缺点：HTML 与 JavaScript 代码混合，不利于维护。

2. DOM 属性方式

通过 JavaScript 为 DOM 元素的事件属性赋值：

html

预览

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

预览

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

运行

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

预览

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

预览

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

预览

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()方法绑定事件
学会使用事件对象获取事件信息和控制事件行为
理解事件流的捕获和冒泡机制
掌握事件委托技巧提高性能