行业协会网站建设的目的,织梦手机网站模板删除不了,阿里云网站部署,购物小程序制作Web APIs -学习02 文章目录 Web APIs -学习02事件事件监听事件类型事件处理程序 事件类型鼠标事件键盘事件焦点事件文本框输入事件 事件对象环境对象回调函数 学会通过为DOM注册事件来实现可交互的网页特效。 能够判断函数运行的环境并确字 this 所指代的对象理解事件的作用知道应用事件的 3 个步骤 学习会为 DOM 注册事件实现简单可交互的网页特交。 事件
事件是编程语言中的术语它是用来描述程序的行为或状态的一旦行为或状态发生改变便立即调用一个函数。
例如用户使用【鼠标点击】网页中的一个按钮、用户使用【鼠标拖拽】网页中的一张图片
事件监听
结合 DOM 使用事件时需要为 DOM 对象添加事件监听等待事件发生触发时便立即调用一个函数。
addEventListener 是 DOM 对象专门用来添加事件监听的方法它的两个参数分别为【事件类型】和【事件回调】。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title事件监听/title
/head
bodyh3事件监听/h3p idtext为 DOM 元素添加事件监听等待事件发生便立即执行一个函数。/pbutton idbtn点击改变文字颜色/buttonscript// 1. 获取 button 对应的 DOM 对象const btn document.querySelector(#btn)// 2. 添加事件监听btn.addEventListener(click, function () {console.log(等待事件被触发...)// 改变 p 标签的文字颜色let text document.getElementById(text)text.style.color red})// 3. 只要用户点击了按钮事件便触发了/script
/body
/html完成事件监听分成3个步骤
获取 DOM 元素通过 addEventListener 方法为 DOM 节点添加事件监听等待事件触发如用户点击了某个按钮时便会触发 click 事件类型事件触发后相对应的回调函数会被执行
大白话描述所谓的事件无非就是找个机会事件触发调用一个函数回调函数。
事件类型
click 译成中文是【点击】的意思它的含义是监听等着用户鼠标的单击操作除了【单击】还有【双击】dblclick
script// 双击事件类型btn.addEventListener(dblclick, function () {console.log(等待事件被触发...);// 改变 p 标签的文字颜色const text document.querySelector(.text)text.style.color red})// 只要用户双击击了按钮事件便触发了
/script结论【事件类型】决定了事件被触发的方式如 click 代表鼠标单击dblclick 代表鼠标双击。
事件处理程序
addEventListener 的第2个参数是函数这个函数会在事件被触发时立即被调用在这个函数中可以编写任意逻辑的代码如改变 DOM 文本颜色、文本内容等。
script// 双击事件类型btn.addEventListener(dblclick, function () {console.log(等待事件被触发...)const text document.querySelector(.text)// 改变 p 标签的文字颜色text.style.color red// 改变 p 标签的文本内容text.style.fontSize 20px})
/script结论【事件处理程序】决定了事件触发后应该执行的逻辑。
事件类型
将众多的事件类型分类可分为鼠标事件、键盘事件、表单事件、焦点事件等我们逐一展开学习。
鼠标事件
鼠标事件是指跟鼠标操作相关的事件如单击、双击、移动等。
mouseenter 监听鼠标是否移入 DOM 元素
bodyh3鼠标事件/h3p监听与鼠标相关的操作/phrdiv classbox/divscript// 需要事件监听的 DOM 元素const box document.querySelector(.box);// 监听鼠标是移入当前 DOM 元素box.addEventListener(mouseenter, function () {// 修改文本内容this.innerText 鼠标移入了...;// 修改光标的风格this.style.cursor move;})/script
/bodymouseleave 监听鼠标是否移出 DOM 元素
bodyh3鼠标事件/h3p监听与鼠标相关的操作/phrdiv classbox/divscript// 需要事件监听的 DOM 元素const box document.querySelector(.box);// 监听鼠标是移出当前 DOM 元素box.addEventListener(mouseleave, function () {// 修改文本内容this.innerText 鼠标移出了...;})/script
/body键盘事件
keydown 键盘按下触发 keyup 键盘抬起触发
焦点事件
focus 获得焦点
blur 失去焦点
文本框输入事件
input
事件对象
任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来我们称这个对象为事件对象。
bodyh3事件对象/h3p任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来我们称这个对象为事件对象。/phrdiv classbox/divscript// 获取 .box 元素const box document.querySelector(.box)// 添加事件监听box.addEventListener(click, function (e) {console.log(任意事件类型被触发后相关信息会以对象形式被记录下来...);// 事件回调函数的第1个参数即所谓的事件对象console.log(e)})/script
/body事件回调函数的【第1个参数】即所谓的事件对象通常习惯性的将这个对数命名为 event、ev 、ev 。
接下来简单看一下事件对象中包含了哪些有用的信息
ev.type 当前事件的类型ev.clientX/Y 光标相对浏览器窗口的位置ev.offsetX/Y 光标相于当前 DOM 元素的位置
注在事件回调函数内部通过 window.event 同样可以获取事件对象。
环境对象 能够分析判断函数运行在不同环境中 this 所指代的对象。 环境对象指的是函数内部特殊的变量 this 它代表着当前函数运行时所处的环境。
script// 声明函数function sayHi() {// this 是一个变量console.log(this);}// 声明一个对象let user {name: 张三,sayHi: sayHi // 此处把 sayHi 函数赋值给 sayHi 属性}let person {name: 李四,sayHi: sayHi}// 直接调用sayHi() // windowwindow.sayHi() // window// 做为对象方法调用user.sayHi()// userperson.sayHi()// person
/script结论
this 本质上是一个变量数据类型为对象函数的调用方式不同 this 变量的值也不同【谁调用 this 就是谁】是判断 this 值的粗略规则函数直接调用时实际上 window.sayHi() 所以 this 的值为 window
回调函数
如果将函数 A 做为参数传递给函数 B 时我们称函数 A 为回调函数。
script// 声明 foo 函数function foo(arg) {console.log(arg);}// 普通的值做为参数foo(10);foo(hello world!);foo([html, css, javascript]);function bar() {console.log(函数也能当参数...);}// 函数也可以做为参数foo(bar);
/script函数 bar 做参数传给了 foo 函数bar 就是所谓的回调函数了
我们回顾一下间歇函数 setInterval
scriptfunction fn() {console.log(我是回调函数...);}// 调用定时器setInterval(fn, 1000);
/scriptfn 函数做为参数传给了 setInterval 这便是回调函数的实际应用了结合刚刚学习的函数表达式上述代码还有另一种更常见写法。
script// 调用定时器匿名函数做为参数setInterval(function () {console.log(我是回调函数...);}, 1000);
/script结论
回调函数本质还是函数只不过把它当成参数使用使用匿名函数做为回调函数比较常见
