JavaScript 事件与事件监听学习笔记一、这一章在讲什么这一章主要讲网页中的“事件”和“事件监听”。事件就是用户或浏览器在页面上发生的动作比如点击、鼠标移入、键盘按下、输入内容、提交表单。事件监听就是提前告诉浏览器某个元素一旦发生某种事件就执行指定函数。除此之外这一章还顺带讲了常见事件类型、批量给多个元素绑定事件、document/ DOM /querySelector的关系以及简单的 JS 模块化写法。二、核心概念1. 事件它是什么事件就是发生在 HTML 元素上的事情。例如click点击、mouseenter鼠标移入、keydown键盘按下。有什么作用没有事件页面就是静态的。有了事件页面才能和用户互动。它的原理浏览器会监听用户操作和页面状态变化。一旦对应动作发生就会触发相应事件。初学者容易混淆的点事件是“事情本身”不是代码。比如“按钮被点击”是事件不是事件监听。2. 事件监听它是什么事件监听就是给元素注册一个响应规则某事件发生时执行某个函数。也叫事件绑定、注册事件。有什么作用让页面在用户操作时做出反应比如弹窗、改颜色、改内容。它的原理JS 先把处理函数交给浏览器保存。等事件真的发生时浏览器再调用这个函数。初学者容易混淆的点监听不是“立刻执行函数”而是“先登记等触发再执行”。3. 事件三要素它是什么事件源、事件类型、事件触发后执行的函数。有什么作用帮助我们完整理解一段事件代码到底在干什么。它的原理事件源.addEventListener(事件类型, 处理函数)初学者容易混淆的点事件源是“谁触发”事件类型是“发生什么事”函数是“怎么处理”。4.document它是什么document是浏览器提供的对象代表当前整个网页文档。有什么作用它是 JS 操作页面的常用入口。它的原理浏览器解析 HTML 后会生成 DOM 结构document可以访问这套结构。初学者容易混淆的点document不是 HTML 标签也不是整个 DOM 本身而是进入页面结构的入口对象。5. DOM它是什么DOM 是文档对象模型可以理解成“浏览器眼中的网页结构”。有什么作用把 HTML 页面变成 JS 能操作的一组对象。它的原理浏览器把 HTML 解析成一棵 DOM 树每个标签都会变成对象节点。初学者容易混淆的点HTML 是源码DOM 是浏览器解析后的对象结构它们有关联但不是同一个东西。6.querySelector/querySelectorAll它是什么它们是查找 DOM 元素的方法。有什么作用JS 想操作页面必须先找到元素。它的原理按 CSS 选择器规则在 DOM 中查找目标元素。querySelector()返回第一个匹配元素。querySelectorAll()返回所有匹配元素组成的集合。初学者容易混淆的点querySelector找一个。querySelectorAll找一组不是单个元素通常要配合循环使用。7.this在本章代码里的基本含义它是什么在普通函数写法的事件处理中this常表示当前触发事件的那个元素。有什么作用可以直接操作“当前被触发”的元素。它的原理浏览器在调用事件处理函数时会把当前元素作为调用对象。初学者容易混淆的点本章里的this不是“所有元素”而是“当前触发事件的那个元素”。比如鼠标移入第 3 个trthis指的就是第 3 个tr。8. 模块化export/import它是什么把功能拆到不同 JS 文件中再互相导入导出。有什么作用代码更清楚更方便复用和维护。它的原理一个文件用export导出功能另一个文件用import引入功能。在 HTML 中通常要写typemodule。初学者容易混淆的点src是引入文件路径typemodule是告诉浏览器这个脚本按模块方式处理。三、重难点1. 事件和事件监听不是一回事结论事件是动作本身事件监听是对这个动作做出响应的机制。原因事件是“发生了什么”监听是“发生后怎么办”。通俗比喻门铃响了这是事件你听到门铃去开门这是事件监听后的处理。2. 为什么要先querySelector结论JS 不能凭空操作页面必须先找到目标元素。原因事件、样式修改、内容修改都得先明确“操作谁”。通俗比喻先找到人才能通知他做事先找到元素JS 才能控制它。3.querySelectorAll(tr)后为什么要用for结论因为拿到的是一组tr不是单个tr。原因事件监听是给具体元素绑定的不能把一整组元素直接当一个元素来绑定。通俗比喻你拿到的是全班名单不是某一个同学。要给每个人发通知就得一个一个发。4.this指向谁结论在本章这种普通函数写法里this指当前触发事件的元素。原因事件函数是由当前元素触发并调用的。通俗比喻谁“出事”了this通常就是谁。5.onclick和addEventListener的区别结论更推荐addEventListener。原因onclick容易被后面的赋值覆盖addEventListener可以给同一个元素绑定多个同类事件处理函数扩展性更强。小例子onclick像黑板上只留一个值后写的会把前写的擦掉。addEventListener像便签墙可以贴多张便签。6. 常见事件容易混结论事件名不同触发时机就不同。原因浏览器会根据事件类型决定什么时候执行函数。小例子focus是“开始选中输入框”input是“真的开始输入内容”blur是“离开输入框”。7. JS 操作页面的流程要串起来理解结论浏览器先解析 HTML生成 DOMJS 再通过document和querySelector找元素最后绑定事件并修改页面。原因JS 操作的不是 HTML 文本而是 DOM 对象。通俗比喻HTML 像图纸DOM 像建好的房间JS 是拿着钥匙进去操作的人。四、代码理解1. 最基础的事件监听constbtndocument.querySelector(#btn);// 1. 找到按钮btn.addEventListener(click,function(){// 2. 绑定点击事件alert(hello);// 3. 点击后执行});关键理解document当前网页文档入口querySelector(#btn)找到 id 为btn的元素addEventListener(click, ...)监听点击事件function () { ... }点击后执行的函数语法规则总结事件源.addEventListener(事件类型,处理函数);事件类型要写成字符串比如click在addEventListener里写的是click不是onclick2. 批量给表格行绑定事件consttrsdocument.querySelectorAll(tr);// 1. 获取所有 trfor(leti0;itrs.length;i){// 2. 遍历每个 trtrs[i].addEventListener(mouseenter,function(){// 3. 鼠标移入this.style.backgroundColor#f2e2e2;// 4. 当前行变色});trs[i].addEventListener(mouseleave,function(){// 5. 鼠标移出this.style.backgroundColor#fff;// 6. 恢复颜色});}每一步在做什么拿到所有表格行。用循环一个个处理。给每一行绑定鼠标移入事件。移入时把当前行背景色改掉。给每一行绑定鼠标移出事件。移出时恢复背景色。这里的关键点querySelectorAll()返回的是集合。for循环是为了给每一个元素分别绑定事件。this表示当前被鼠标移入或移出的那一行。JS 中写样式是backgroundColor不是background-color。3. 常见事件速记click// 点击mouseenter// 鼠标移入mouseleave// 鼠标移出keydown// 键盘按下keyup// 键盘抬起focus// 获得焦点blur// 失去焦点input// 输入内容时submit// 表单提交时4. 模块化的最小示例scriptsrc./js/eventDemo.jstypemodule/script// utils.jsexportfunctionprintLog(msg){console.log(msg);}// eventDemo.jsimport{printLog}from./utils.js;document.querySelector(#btn).addEventListener(click,function(){printLog(按钮被点击了);});理解export把功能导出去import把别的文件里的功能拿进来typemodule告诉浏览器这个脚本使用模块化语法五、易错点把事件和事件监听混为一谈。事件是动作监听是处理机制。在addEventListener里把事件名写成onclick。正确写法是click。以为querySelectorAll()拿到的是一个元素。它返回的是一组元素通常要用循环。把this理解成“所有元素”或“整个数组”。本章这里的this指当前触发事件的那个元素。在 JS 中写 CSS 属性时还写成background-color。JS 里要写backgroundColor。分不清focus、input、blur。focus点进去input内容变化blur离开分不清document、DOM、querySelector。document是入口DOM 是页面对象结构querySelector是查找元素的方法六、记忆口诀 / 通俗比喻事件是动作监听是等动作发生后再处理。先找元素再谈操作。**querySelector找一个querySelectorAll找一窝。**谁触发事件this常常就是谁。HTML 是图纸DOM 是成品房JS 是操作员。**onclick易覆盖addEventListener更能打。****focus进input写blur走。**七、应用下面用一个完整的小案例把这章的知识串起来。场景做一个“学生信息表”交互页面需求鼠标移入表格行时高亮当前行鼠标移出时恢复原色输入框获得焦点时边框变色输入内容时实时显示当前输入了什么点击按钮时输出提示信息使用模块化把“打印日志”单独拆出去这个例子里几乎把本章的主线都串起来了先有 HTML 页面结构浏览器把 HTML 解析成 DOMJS 通过document和querySelector/querySelectorAll找到元素再通过addEventListener绑定不同事件最后在事件触发时修改样式或输出内容完整代码!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8title事件监听案例/titlestylebody{font-family:Arial,sans-serif;padding:20px;}table{border-collapse:collapse;width:400px;margin-top:20px;}th, td{border:1px solid #ccc;padding:10px;text-align:center;}#username{padding:8px;outline:none;border:1px solid #ccc;}#preview{margin-top:10px;color:#666;}/style/headbodyh2学生信息交互演示/h2inputidusernametypetextplaceholder请输入姓名buttonidbtn提交/buttondividpreview当前输入无/divtabletrth姓名/thth年龄/th/trtrtd张三/tdtd18/td/trtrtd李四/tdtd19/td/trtrtd王五/tdtd20/td/tr/tablescriptsrc./js/eventDemo.jstypemodule/script/body/html// utils.jsexportfunctionprintLog(msg){console.log(msg);}// eventDemo.jsimport{printLog}from./utils.js;constbtndocument.querySelector(#btn);constinputdocument.querySelector(#username);constpreviewdocument.querySelector(#preview);consttrsdocument.querySelectorAll(tr);btn.addEventListener(click,function(){printLog(按钮被点击了);});input.addEventListener(focus,function(){this.style.borderColorskyblue;});input.addEventListener(blur,function(){this.style.borderColor#ccc;});input.addEventListener(input,function(){preview.innerText当前输入this.value;});for(leti1;itrs.length;i){trs[i].addEventListener(mouseenter,function(){this.style.backgroundColor#f2e2e2;});trs[i].addEventListener(mouseleave,function(){this.style.backgroundColor#fff;});}按逻辑顺序串讲一遍1. 先有 HTML 结构页面里有一个输入框一个按钮一个提示文字区域一张表格这时它们只是 HTML 标签是页面的原始结构。2. 浏览器解析 HTML生成 DOM浏览器加载页面后会把这些标签解析成 DOM 对象。这时候输入框、按钮、表格行都不再只是“文本标签”而是 JS 可以操作的对象。所以后面 JS 才能写document.querySelector(#btn)document.querySelector(#username)document.querySelectorAll(tr)3.document是入口querySelector是查找工具constbtndocument.querySelector(#btn);constinputdocument.querySelector(#username);constpreviewdocument.querySelector(#preview);consttrsdocument.querySelectorAll(tr);这一步的本质是先找到元素再谈操作。document当前网页文档入口querySelector()找第一个匹配元素querySelectorAll()找所有匹配元素这里的trs是一个表格行集合不是单个元素所以后面要配合循环使用。4. 给按钮绑定点击事件btn.addEventListener(click,function(){printLog(按钮被点击了);});这里的三要素很完整事件源btn事件类型click处理函数点击后调用printLog这说明事件监听的基本格式就是事件源.addEventListener(事件类型,处理函数);5. 给输入框绑定焦点和输入事件input.addEventListener(focus,function(){this.style.borderColorskyblue;});input.addEventListener(blur,function(){this.style.borderColor#ccc;});input.addEventListener(input,function(){preview.innerText当前输入this.value;});这部分把三个常见事件区分得很清楚focus点进输入框时触发blur离开输入框时触发input输入内容变化时触发这里的this指当前触发事件的输入框本身所以可以直接写this.style.borderColorthis.value6. 给多个tr批量绑定事件for(leti1;itrs.length;i){trs[i].addEventListener(mouseenter,function(){this.style.backgroundColor#f2e2e2;});trs[i].addEventListener(mouseleave,function(){this.style.backgroundColor#fff;});}这一步是本章很关键的地方。因为querySelectorAll(tr)拿到的是所有表格行它返回的是一组元素所以不能直接对整组元素写addEventListener必须通过for循环一个一个绑定这里i 1开始是为了跳过表头那一行只给数据行加效果。当鼠标移入某一行时this.style.backgroundColor#f2e2e2;说明当前行背景色变了。鼠标移出时再恢复为白色。7. 模块化在这个例子里怎么体现import{printLog}from./utils.js;exportfunctionprintLog(msg){console.log(msg);}说明utils.js负责提供工具函数eventDemo.js负责页面交互逻辑功能拆开后代码更清楚HTML 中写scriptsrc./js/eventDemo.jstypemodule/script是因为这里使用了import/export所以要告诉浏览器这个脚本按模块方式运行。这个案例把本章主线怎么串起来可以把整个流程压缩成下面这条主线HTML 提供页面结构输入框、按钮、表格。浏览器解析成 DOM页面元素变成 JS 可操作对象。JS 通过document找元素用querySelector/querySelectorAll定位目标。给元素绑定事件点击、移入、移出、获得焦点、失去焦点、输入。事件触发时执行函数修改样式、改文字、输出日志。模块化优化代码把工具函数拆出去提高可维护性。所以网页能“动起来”本质就是先找到 DOM 元素再监听事件最后在事件触发时操作元素。这就是本章最核心的实际应用逻辑。八、最终总结这一章的核心是理解“页面为什么能动起来”。事件是用户操作事件监听是浏览器在事件发生时执行对应函数。JS 想操作页面必须先通过document和querySelector找到 DOM 元素。addEventListener是更推荐的事件绑定方式常配合循环给多个元素批量绑定事件。模块化部分先记住结论代码可以拆文件export导出import导入模块脚本通常写typemodule。