文档教程前端【免费下载链接】Web千古前端图文教程超详细的前端入门到进阶知识库。从零开始学前端做一名精致优雅的前端工程师。项目地址https://gitcode.com/gh_mirrors/we/Web点击查看免费下载本教程来自「千古前端图文教程」仓库README的 04-JavaScript基础/35-事件简介.md面向从零开始学习前端的读者。核心主题是 JavaScript 的事件驱动模型事件是什么、事件的三要素、如何获取事件源、如何绑定事件、如何书写事件驱动程序并配有京东顶部广告栏关闭、鼠标悬停换图两个完整实战案例。读完本篇你将掌握用原生 JavaScript 让页面元素对用户交互做出反应的完整套路并理解它与 DOM 操作、事件绑定进阶写法DOM0/DOM2之间的承接关系。一、事件简介JavaScript 是事件驱动为核心的语言事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说有下面这些代表性的事件点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。JavaScript 是以事件驱动为核心的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的。换句话说用户对页面做了什么点击、移动鼠标、敲击键盘……页面就要做出对应的响应这一整套感知交互 → 触发处理逻辑的机制就是事件驱动。要理解事件必须先理解事件的三要素这是本文的核心骨架。二、事件的三要素事件源、事件、事件驱动程序事件的三要素事件源、事件、事件驱动程序。用一个生活例子来类比我用手去按开关灯亮了。这件事情里事件源是手。事件是按开关。事件驱动程序是灯开了或者关了。再看一个网页中的例子网页上弹出一个广告我点击右上角的X广告就关闭了。这件事情里事件源是X。事件是onclick。事件驱动程序是广告关闭了。于是我们可以总结出谁引发的后续事件谁就是事件源。三要素的正式定义如下事件源引发后续事件的 HTML 标签。事件JS 已经定义好了的事件类型如onclick、onmouseover、onload等见下文常见事件。事件驱动程序对样式和 HTML 的操作也就是DOM操作。也就是说我们可以在事件对应的属性中写一些 JS 代码当事件被触发时这些代码将会执行。代码书写三步走重要掌握了三要素写事件代码就有一套固定套路步骤如下获取事件源document.getElementById(box)——类似于 Android 里面的findViewById。绑定事件事件源box.事件onclick function(){ 事件驱动程序 }。书写事件驱动程序关于 DOM 的操作。最简单的代码举例点击 box1然后弹框body div idbox1/div script typetext/javascript // 1、获取事件源 var div document.getElementById(box1); // 2、绑定事件 div.onclick function () { // 3、书写事件驱动程序 alert(我是弹出的内容); } /script /body常见事件一览本仓库文档中反复用到的主要事件事件触发时机本仓库中的典型用法onclick鼠标单击点击关闭广告栏、按钮点击onmouseover鼠标移入元素悬停鼠标悬停切换图片onmouseout鼠标移出元素鼠标移开还原图片onmousemove鼠标在元素上移动哪怕 1 像素盒子跟随鼠标移动、放大镜onmouseenter/onmouseleave移入 / 移出不冒泡商品放大镜案例onload页面文本和图片加载完毕window.onload延迟执行onkeydown等键盘事件键盘按下见44-键盘事件.md下面针对事件的三要素分别进行介绍。三、要素一获取事件源的方式DOM 节点的获取获取事件源本质就是获取 DOM 节点。常见方式如下var div1 document.getElementById(box1); //方式一通过id获取单个标签 var arr1 document.getElementsByTagName(div); //方式二通过 标签名 获得 标签数组所以有s var arr2 document.getElementsByClassName(hehe); //方式三通过 类名 获得 标签数组所以有s注意事项方式一getElementById获取的是单个元素节点因为 id 在页面中是唯一的。方式二、方式三获取的是标签数组注意方法名里的s习惯上是先遍历之后再使用。特殊情况即使数组中只有 1 个值它也是包在数组里的需要这样取值document.getElementsByTagName(div1)[0]; //取数组中的第一个元素 document.getElementsByClassName(hehe)[0]; //取数组中的第一个元素更完整的 DOM 节点获取与访问关系父子兄关系、parentNode、children等可以继续阅读仓库中的 36-DOM简介和DOM操作.md本仓库将其总结为想要操作元素节点必须首先要找到该节点。四、要素二绑定事件的方式方式一直接绑定匿名函数div idbox1 /div script typetext/javascript var div1 document.getElementById(box1); //绑定事件的第一种方式 div1.onclick function () { alert(我是弹出的内容); } /script方式二先单独定义函数再绑定div idbox1 /div script typetext/javascript var div1 document.getElementById(box1); //绑定事件的第二种方式 div1.onclick fn; //注意这里是fn不是fn()。fn()指的是返回值。 //单独定义函数 function fn() { alert(我是弹出的内容); } /script注意上方代码的注释。绑定的时候是写fn不是写fn()。fn代表的是整个函数而fn()代表的是返回值。方式三行内绑定!--行内绑定-- div idbox1 onclickfn()/div script typetext/javascript function fn() { alert(我是弹出的内容); } /script注意第一行代码绑定时写的是fn()不是fn。因为绑定的这段代码不是写在 JS 代码里的而是被识别成了字符串写fn()相当于在元素上声明点击时执行这个函数调用。进阶DOM0 与 DOM2 两种事件绑定级别本文介绍的onclick 函数写法属于DOM0 级事件。在仓库的 41-事件的绑定和事件对象Event.md 中有更深入的讲解要点如下DOM0 写法element.onclick function(){}一个元素的一个事件只能绑定一个响应函数绑定多个时后者会覆盖前者。DOM2 写法element.addEventListener(click, fn, false)一个元素的一个事件可以绑定多个响应函数不存在覆盖问题适合团队开发其中第三个参数true表示捕获阶段触发false默认表示冒泡阶段触发。IE8 及以下浏览器不支持addEventListener需要用attachEvent(onclick, fn)且其回调中的this指向window与标准写法的this不同仓库文档中给出了用callback.call(element)统一this的兼容性封装myBind()。事件触发后还有传播过程捕获 → 目标 → 冒泡三个阶段以及event事件对象event event || window.event的兼容写法、clientX/clientY、pageX/pageY等坐标属性这些分别在本仓库的 42-事件的传播和事件冒泡.md 和 41-事件的绑定和事件对象Event.md 中有详细图文讲解。五、要素三事件驱动程序操作属性与样式事件驱动程序就是事件被触发后要做的 DOM 操作上面拿alert举例不仅如此我们还可以操作标签的属性和样式。举例点击鼠标时原本粉色的 div 变大了背景变红style #box1 { width: 100px; height: 100px; background-color: pink; cursor: pointer; } /style /head body div idbox1 /div script typetext/javascript var div1 document.getElementById(box1); //点击鼠标时原本粉色的div变大了背景变红了 div1.onclick function () { div1.style.width 200px; //属性值要写引号 div1.style.height 200px; div1.style.backgroundColor red; //属性名是backgroundColor不是background-color } /script上方代码的注意事项在 JS 里写属性值时要用引号。在 JS 里写属性名时是backgroundColor驼峰命名法不是 CSS 里面的background-color。关于通过style对象操作行内样式的更多细节style是一个对象、只能获取行内样式、style[属性]写法、cssText批量设置等可以阅读本仓库的 37-通过style对象获取和设置行内样式.md。该文档强调style只能获取行内样式不能获取内嵌样式和外链样式而通过 JS 设置的样式都是行内样式优先级较高除非样式表中写了!important。六、onload 事件等页面加载完毕再执行onload事件比较特殊单独讲一下。当页面加载文本和图片完毕的时候触发 onload 事件。举例script typetext/javascript window.onload function () { console.log(smyhvae); //等页面加载完毕时打印字符串 } /script有一点我们要知道JS 的加载是和 HTML 同步加载的。因此如果使用元素在定义元素之前容易报错。这个时候onload 事件就能派上用场了我们可以把使用元素的代码放在 onload 里就能保证这段代码是最后执行。建议是整个页面上所有元素加载完毕再执行 JS 内容。所以window.onload可以预防使用标签在定义标签之前的问题。补充背景知识浏览器默认遵循 HTML 文档从上至下的加载顺序解析网页所以通常会把 JS 写在 body 内部的末尾但如果你想把 JS 写到head标签中就必须用window.onload包裹实现先加载最后执行延迟执行。这一点在仓库的 02-开始写JavaScripthello world.md 中有更详细的原理解释并在 36-DOM简介和DOM操作.md 中有配套示例。备注关于 onload 事件在下一篇文章《DOM简介和DOM操作》即 36-DOM简介和DOM操作.md中有更详细的讲解和示例。七、实战案例一京东顶部广告栏的关闭场景页面上方有一个广告栏当鼠标点击右上角的X时关掉整个广告栏。这就是典型的事件驱动应用。代码实现如下!DOCTYPE html html head langen meta charsetUTF-8 title/title style * { padding: 0; margin: 0; } .top-banner { background-color: pink; height: 80px; } .w { width: 1210px; margin: 10px auto; position: relative; } img { display: block; width: 1210px; height: 80px; background-color: blue; } a { position: absolute; top: 5px; right: 5px; color: #fff; background-color: #000; text-decoration: none; width: 20px; height: 20px; font: 700 14px/20px simsum; text-align: center; } .hide { display: none!important; } /style /head body div classtop-banner idtopBanner div classw img src alt/ a href# idcloseBanner×/a /div /div script //需求点击案例隐藏盒子。 //思路点击a链接让top-banner这个盒子隐藏起来加隐藏类名。 //1.获取事件源和相关元素 var closeBanner document.getElementById(closeBanner); var topBanner document.getElementById(topBanner); //2.绑定事件 closeBanner.onclick function () { //3.书写事件驱动程序 //类控制 // topBanner.className hide; //保留原类名添加新类名 topBanner.className hide;//替换旧类名方式一 // topBanner.style.display none; //方式二与上一行代码的效果相同 } /script /body /html这个案例把事件三要素完整串联起来事件源#closeBanner右上角X链接。事件onclick鼠标点击。事件驱动程序通过修改topBanner的类名或行内样式让广告栏隐藏。代码中同时给出了三种隐藏盒子的实现思路供对比写法说明topBanner.className hide;替换旧类名方式一不管之前的类名叫什么都会被修改topBanner.className hide;保留原类名追加新类名topBanner.style.display none;方式二直接设置行内样式与上面两行效果相同注意className hide这种赋值方式会替换旧类名意思是不管之前的类名叫什么都会被修改如果元素原本还有其他类名需要保留应使用追加的方式。八、实战案例二鼠标悬停切换图片需求当鼠标悬停在 img 上时更换为另外一张图片鼠标离开时还原为本来的图片。代码实现!DOCTYPE html html head langen meta charsetUTF-8 title/title script //window.onload页面加载完毕以后再执行此代码 window.onload function () { //需求鼠标放到img上更换为另一张图片也就是修改路径src的值。 //步骤 //1.获取事件源 //2.绑定事件 //3.书写事件驱动程序 //1.获取事件源 var img document.getElementById(box); //2.绑定事件(悬停事件鼠标进入到事件源中立即触发事件) img.onmouseover function () { //3.书写事件驱动程序(修改src) img.src image/jd2.png; // this.src image/jd2.png; } //2.绑定事件(悬停事件鼠标进入到事件源中立即触发事件) img.onmouseout function () { //3.书写事件驱动程序(修改src) img.src image/jd1.png; } } /script /head body img idbox srcimage/jd1.png stylecursor: pointer;border: 1px solid #ccc;/ /html这个案例有两个值得注意的技术点window.onload的必要性所有事件代码都写在window.onload内部确保页面包括图片加载完毕后再获取元素、绑定事件避免使用元素在定义元素之前的报错。事件驱动程序修改的是属性这里驱动的是src属性修改图片路径与上一个案例修改类名、样式不同说明事件驱动程序 对样式和 HTML 的操作也就是 DOM 操作操作对象既可以是样式也可以是属性。注释中的this.src image/jd2.png是等价的写法在onclick/onmouseover这类 DOM0 事件处理函数中this指向触发事件的元素本身。九、知识衔接接下来学什么本篇文章讲清楚了事件的三要素与最常用的onclick/onmouseover等绑定方式它们是后续所有前端交互的基础。在「千古前端图文教程」仓库中事件相关主题还有更深的进阶内容推荐按以下顺序继续阅读36-DOM简介和DOM操作.md事件驱动程序本质上是 DOM 操作这篇讲清了 DOM 树、节点分类、元素节点的获取与访问关系。37-通过style对象获取和设置行内样式.md事件驱动中最常用的样式操作对象style的详细用法。41-事件的绑定和事件对象Event.mdDOM0/DOM2 事件绑定的区别、addEventListener/attachEvent兼容写法、event事件对象鼠标坐标、按键等以及使 div 跟随鼠标移动商品放大镜等综合案例。42-事件的传播和事件冒泡.md事件捕获、事件目标、事件冒泡三个阶段addEventListener第三参数true/false的含义。43-事件委托.md把事件绑定到父层、通过event.target匹配目标元素的性能优化方案。44-键盘事件.md键盘事件的绑定与按键判断。掌握事件源 → 事件 → 事件驱动程序这个三步套路配合上述进阶知识你就能写出点击关闭广告栏、悬停换图、跟随鼠标移动、放大镜、轮播图等常见交互效果真正迈入用 JavaScript 驱动页面交互的大门。赞分享文档教程前端【免费下载链接】Web千古前端图文教程超详细的前端入门到进阶知识库。从零开始学前端做一名精致优雅的前端工程师。项目地址https://gitcode.com/gh_mirrors/we/Web点击查看免费下载相关推荐react-pdf实现原理揭秘useResolver与可取消Promise如何消除竞态react pdf实现原理揭秘useResolver与可取消Promise如何消除竞态 react pdf 让你像引用图片一样简单地在 React 应用中显示文档教程前端JavaScript 事件驱动编程实战The JavaScript Way 之 DOM 事件处理完全指南JavaScript 事件驱动编程实战The JavaScript Way 之 DOM 事件处理完全指南 本篇指南基于开源书籍《The JavaScript教程文档不止基础播放ff2mpv中编写mpv参数预设的10个实用清单不止基础播放ff2mpv中编写mpv参数预设的10个实用清单 ff2mpv 是一款让 Firefox、Chrome 等浏览器用 MPV 播放链接的扩展而它最上一篇PostGraphile V5 导出可执行 Schema用 graphile-export 把运行时构建的 GraphQL 模式固化为代码下一篇Onekey 快速上手指南3 步解锁任意 Steam 游戏的全部 DLC创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考