早期写法（了解）：on事件 会被覆盖#

PPT 还给了一种老写法，并说明了它和 addEventListener 的区别：

早期版本写法（了解）：事件源.on事件 = function() { … } 区别：on 方式会被覆盖，addEventListener 方式可以绑定多次，拥有更多特性，推荐使用。

课程代码把两种写法摆在一起做了对比实验：

1
//事件监听 - addEventListener (可以多次绑定同一事件)
2
document.querySelector('#btn1').addEventListener('click', () => {
3
  console.log('试试就试试~~');
4
});
5
document.querySelector('#btn1').addEventListener('click', () => {
6
  console.log('试试就试试22~~');
7
});
8

9
//事件绑定-早期写法 - onclick (如果多次绑定同一事件, 覆盖) - 了解
10
document.querySelector('#btn2').onclick = () => {
11
  console.log('试试就试试~~');
12
};
13
document.querySelector('#btn2').onclick = () => {
14
  console.log('试试就试试22~~');
15
};

两个按钮长得一模一样，点起来的结果完全不同：

第一步：脚本搬到 js/ 目录下的独立文件#

HTML 里只留一行引入，剩下的都在外部文件里：

1
<!-- type="module" 模块化JS -->
2
<script src="./js/eventDemo.js" type="module"></script>

第二步：模块化（export / import）——重复的代码抽成”工具函数”#

三个文件各管一段，代码长这样：

1
// js/utils.js —— 工具函数：谁都能用的通用能力
2
export function printLog(msg){
3
  console.log(msg);
4
}

1
// js/eventDemo.js —— 业务代码：这个页面的事件都在这儿
2
import { printLog } from "./utils.js"; // 从工具文件里拿函数
3

4
//click: 鼠标点击事件
5
document.querySelector('#b2').addEventListener('click', () => {
6
  printLog("我被点击了...");
7
})
8

9
//mouseenter: 鼠标移入
10
document.querySelector('#last').addEventListener('mouseenter', () => {
11
  printLog("鼠标移入了...");
12
})
13

14
//mouseleave: 鼠标移出
15
document.querySelector('#last').addEventListener('mouseleave', () => {
16
  printLog("鼠标移出了...");
17
})

1
<!-- 11. JS-常见事件(优化).html —— 页面里只剩一行引入 -->
2
<script src="./js/eventDemo.js" type="module"></script>

优化前后对比：

1
Access to script at 'file:///..../js/eventDemo.js' from origin 'null' has been blocked by CORS policy

一、知识回顾（读完直接做下面的实践题）#

1. 事件：HTML 事件是发生在 HTML 元素上的 “事情”，比如按钮被点击、鼠标移动到元素上、按下键盘按键
2. 事件监听：JavaScript 可以在事件触发时立即调用一个函数做出响应，也叫事件绑定或注册事件；写法是 事件源.addEventListener('事件类型', 事件触发执行的函数);
3. 三要素：事件源（哪个 DOM 元素触发了事件，要先获取元素）、事件类型（用什么方式触发，如鼠标单击 'click'）、事件触发执行的函数（要做什么事）
4. 第二个参数是函数本身，不能加括号——addEventListener('click', sayHello()) 会变成”页面一加载就执行”，点击反而没反应；事件类型是字符串，'click' 的引号不能少
5. 早期写法（了解）：事件源.on事件 = function(){}；区别是 on 方式会被覆盖（后一次赋值冲掉前一次），而 addEventListener 可以绑定多次，同一事件绑两遍两个都会执行——推荐用 addEventListener
6. 常见事件分四类：鼠标 click（点击）/ mouseenter（移入）/ mouseleave（移出）；键盘 keydown（按下）/ keyup（抬起）；焦点 focus（获得焦点）/ blur（失去焦点）；表单 input（用户输入时，每敲一个字符触发一次）/ submit（表单提交）
7. submit 有默认行为——提交后浏览器会带着参数刷新页面；input 触发非常频繁，写实时逻辑时要注意
8. 回调里能做的事就是 DOM 操作：console.log() / alert() 看效果、this.innerText 改内容、this.style.backgroundColor 改样式、this.value 读输入值
9. 回调写成 function(){} 时 this 就是事件源（被点的那个元素）；箭头函数没有自己的 this，要用 this 就别写箭头函数
10. 代码优化两步：① 重复逻辑抽成函数（无需额外环境）② 脚本搬到 js/ 外部文件用 <script src="./js/xxx.js"> 引入；跨文件复用靠模块化——utils.js 里 export function printLog(msg){...}、业务文件里 import { printLog } from "./utils.js"，引入的 <script> 必须加 type="module"，而且不能用 file:// 双击打开（会被 CORS 拦截），要用本地服务器（Live Server）

二、裸写题#

• 2-1 给按钮绑定点击事件 页面上有一个按钮（id 为 btn）。要求：点击这个按钮时，弹出提示文字”试试就试试”（用浏览器弹窗，别只打印到控制台）。 （练习文件 test_17_点击事件.html 里已经准备好了按钮和写作区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：先”抓住”按钮，再告诉它”被点击时干什么”——三要素一个个对上 二级 · 方法：document.querySelector('#btn').addEventListener('click', 函数)；弹窗用 alert('...') 三级 · 骨架：document.querySelector('#btn').____________('click', () => { ____('试试就试试'); });

  参考答案（做完再点开）

  1
  document.querySelector('#btn').addEventListener('click', () => {
  2
    alert('试试就试试');
  3
  });

  对照课程 08. JS-事件监听.html 和 PPT 第 33 页（那页的两种写法就是 addEventListener 和 onclick）。检查点：点一次按钮弹一次窗，页面上其他地方点击不该弹。

• 2-2 同一个按钮绑两次，再和 on 方式比一比 页面上有两个按钮：btn1 和 btn2。要求：

  1. 给 btn1 用监听方式绑定两次点击事件：第一次打印”试试就试试~~“、第二次打印”试试就试试22~~”
  2. 给 btn2 用 on 方式也绑定两次点击事件：内容同上
  3. 分别点两个按钮，从控制台看结果有什么不同，说出为什么 （练习文件 test_17_绑定方式对比.html 里已经准备好了两个按钮和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：就是把课程 08. JS-事件监听.html 的对比实验自己写一遍 二级 · 方法：监听方式 addEventListener('click', ...) 可以写两遍；on 方式是 元素.onclick = 函数，赋值两次 三级 · 骨架：document.querySelector('#btn1').addEventListener('click', () => { console.log('____'); });（再来一次）/ document.querySelector('#btn2').onclick = () => { console.log('____'); };（再来一次）

  参考答案（做完再点开）

  1
  //1. addEventListener 绑两次：两次都会执行
  2
  document.querySelector('#btn1').addEventListener('click', () => {
  3
    console.log('试试就试试~~');
  4
  });
  5
  document.querySelector('#btn1').addEventListener('click', () => {
  6
    console.log('试试就试试22~~');
  7
  });
  8
  
  9
  //2. on 方式绑两次：后一次覆盖前一次
  10
  document.querySelector('#btn2').onclick = () => {
  11
    console.log('试试就试试~~');
  12
  };
  13
  document.querySelector('#btn2').onclick = () => {
  14
    console.log('试试就试试22~~');
  15
  };

  显示更多显示更少

  结果：点 btn1 控制台出现两行，点 btn2 只出现一行（试试就试试22~~）。原因：onclick 是给元素的属性赋值，属性只有一个值；addEventListener 是往监听器列表里追加，能叠加。

• 2-3 鼠标移入移出换背景色 页面上有一张成绩表（表头 + 3 行数据）。要求：鼠标移入某一行时，这一行背景色变成 #f2e2e2；鼠标移出时，这一行恢复成白色。 （练习文件 test_17_鼠标移入移出.html 里已经准备好了表格和写作区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：要给”每一行”都绑上监听（得用循环），而且是两个事件各绑一次 二级 · 方法：document.querySelectorAll('tbody tr') 拿到所有数据行；循环里 trs[i].addEventListener('mouseenter', 函数) 和 'mouseleave'；改背景色用 style.backgroundColor 三级 · 骨架：let trs = document.querySelectorAll('____'); / for (let i = 0; i < trs.____; i++) { / trs[i].addEventListener('____', function () { trs[i].style.________ = '#f2e2e2'; }); / 再绑一个 '____' 设成 '#fff'

  参考答案（做完再点开）

  1
  // 1. 获取所有数据行（只拿 tbody 里的，表头不参与）
  2
  let trs = document.querySelectorAll('tbody tr');
  3
  
  4
  // 2. 给每一行都绑上"移入/移出"两个监听
  5
  for (let i = 0; i < trs.length; i++) {
  6
    trs[i].addEventListener('mouseenter', function () {  // 鼠标移入
  7
      trs[i].style.backgroundColor = '#f2e2e2';
  8
    });
  9
  
  10
    trs[i].addEventListener('mouseleave', function () {  // 鼠标移出
  11
      trs[i].style.backgroundColor = '#fff';
  12
    });
  13
  }

  对照课程 09. JS-案例-员工列表.html 的脚本（课程里写的是 querySelectorAll('tr')，会把表头也算进去；这里只选 tbody tr）。检查点：鼠标划过哪一行，就只有那一行变色。

• 2-4 让输入框”有反应” 页面上有一个姓名输入框（id 为 username）和一个显示区（id 为 tip）。要求：

  1. 输入框获得焦点时，把显示区的文字改成”正在输入姓名…”
  2. 输入框失去焦点时，把显示区的文字改成”输入完成：“后面接上输入框里的内容
  3. 输入框里每敲一个字，就把当前的输入内容实时显示在显示区里 （练习文件 test_17_焦点与输入事件.html 里已经准备好了输入框、显示区和写作区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：同一个输入框要绑三个事件，每个事件里都是”改另一个元素的文字” 二级 · 方法：事件类型 'focus'、'blur'、'input'；读输入框内容用 this.value 或 输入框.value；改文字用 innerText（里面要拼变量就用模板字符串） 三级 · 骨架：let input = document.querySelector('#username'); / let tip = document.querySelector('#tip'); / input.addEventListener('____', function () { tip.innerText = '正在输入姓名…'; }); / input.addEventListener('blur', function () { tip.innerText = 输入完成：${this.____}; }); / input.addEventListener('____', function () { tip.innerText = this.value; });

  参考答案（做完再点开）

  1
  let input = document.querySelector('#username');
  2
  let tip = document.querySelector('#tip');
  3
  
  4
  //1. 获得焦点
  5
  input.addEventListener('focus', function () {
  6
    tip.innerText = '正在输入姓名…';
  7
  });
  8
  
  9
  //2. 失去焦点：拼上当前输入的内容
  10
  input.addEventListener('blur', function () {
  11
    tip.innerText = `输入完成：${this.value}`;
  12
  });
  13
  
  14
  //3. 输入时实时回显
  15
  input.addEventListener('input', function () {
  16
    tip.innerText = this.value;
  17
  });

  显示更多显示更少

  对照课程 10. JS-常见事件.html 里 focus / blur / input 三段。三个检查点：① 光标点进输入框 → 提示变”正在输入姓名…”；② 敲字时显示区跟着变；③ 点到别处 → 变成”输入完成：xxx”。注意 this.value 读的是输入框里的内容（不是 innerHTML）。

三、综合题#

• 3-1 做一个”个人名片”小交互页 页面上有一张名片（#card）、一个”换个问候语”按钮（#greetBtn）、一个昵称输入框（#nickname）和一行状态提示（#status）。要求做出三个交互，并把重复的逻辑抽成函数：

  1. 点击”换个问候语”按钮：把名片上的问候语（#greeting）改成”你好，欢迎来看我的主页”（连点多次效果相同即可）
  2. 鼠标移入名片时名片背景变 #e6f7ff，移出恢复白色
  3. 在昵称输入框里输入时，实时把”当前昵称：“加输入内容显示在状态提示里；失去焦点时改成”昵称已确定”
  4. 代码优化：把”改状态提示文字”这段重复逻辑抽成一个函数（比如 setStatus(text)），第 3 步的三个事件里都调用它，而不是各写一遍 （练习文件 test_17_综合_交互三连.html 里已经准备好了页面元素和写作区。） （进阶·可选：把 setStatus 挪到 js/utils.js 用 export/import 引入——这一步需要用 Live Server 打开，双击是跑不起来的。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：三个交互分别对应三组事件；第 4 步是”代码优化”里的第一步——抽函数，函数不需要任何额外环境，普通 <script> 就行 二级 · 方法：点击 'click'、移入移出 'mouseenter'/'mouseleave'、输入 'input'、失焦 'blur'；改文字 innerText；函数定义 function setStatus(text){ ... }，调用 setStatus('...') 三级 · 骨架：function setStatus(text) { document.querySelector('#status').____ = text; } / document.querySelector('#greetBtn').addEventListener('____', () => { document.querySelector('#greeting').innerHTML = '____'; }); / card.addEventListener('mouseenter', () => { card.style.________ = '#e6f7ff'; }); / input.addEventListener('input', () => { setStatus(当前昵称：${input.____}); });

  参考答案（做完再点开）

  1
  // 先定义"改状态提示"的工具函数：重复逻辑只写一次
  2
  function setStatus(text) {
  3
    document.querySelector('#status').innerText = text;
  4
  }
  5
  
  6
  let card = document.querySelector('#card');
  7
  let nickname = document.querySelector('#nickname');
  8
  
  9
  //1. 点击按钮改问候语
  10
  document.querySelector('#greetBtn').addEventListener('click', () => {
  11
    document.querySelector('#greeting').innerHTML = '你好，欢迎来看我的主页';
  12
  });
  13
  
  14
  //2. 鼠标移入移出换背景色
  15
  card.addEventListener('mouseenter', () => {
  16
    card.style.backgroundColor = '#e6f7ff';
  17
  });
  18
  card.addEventListener('mouseleave', () => {
  19
    card.style.backgroundColor = '#fff';
  20
  });
  21
  
  22
  //3. 输入实时回显 + 失焦确认（三处都调用工具函数）
  23
  nickname.addEventListener('input', () => {
  24
    setStatus(`当前昵称：${nickname.value}`);
  25
  });
  26
  nickname.addEventListener('focus', () => {
  27
    setStatus('正在输入昵称…');
  28
  });
  29
  nickname.addEventListener('blur', () => {
  30
    setStatus('昵称已确定');
  31
  });

  显示更多显示更少

  三个检查点：① 点按钮后名片上的问候语变了；② 鼠标划进名片变浅蓝、划出变白；③ 输入框每敲一个字状态行都跟着变，三处提示都走 setStatus 这一个函数（想改提示的样式，只改函数里那一行就够了——这就是”抽函数”带来的好处）。 进阶版验证方式：把 setStatus 移到 js/utils.js 里写成 export function setStatus(text) {...}，主文件顶部 import { setStatus } from "./utils.js";，<script> 加 type="module"，然后用 Live Server 打开——直接双击（file://）会报 CORS，事件全都不响应。