DOM事件
事件监听
概念
事件:事件是在编程时系统内发生的动作或者发生的事情
事件监听:是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为 绑定事件或者注册事件
使用
语法:元素对象.addEventListener('事件类型', 函数)
事件监听三要素:
- 事件源: 触发事件的元素
- 事件类型: 触发事件的动作/行为,比如鼠标单击 click、鼠标经过 mouseover 等
- 事件调用的函数: 要做什么事,执行代码
注意:
- 事件类型要加引号
- 函数是触发之后再去执行,每次触发都会执行一次
- 函数写法1:function() {执行代码}
- 函数写法2:函数名 注意:不加小括号,加小括号立即执行,这里是触发执行
<input type="button" value="点击"> <script> // 获取元素 const btn = document.querySelector('input') btn.addEventListener('click',function () { console.log('hellow~') }) </script>
完成事件监听分成3个步骤:
- 获取 DOM 元素
- 通过
addEventListener
方法为 DOM 节点添加事件监听 - 等待事件触发,如用户点击了某个按钮时便会触发
click
事件类型,事件触发后,相对应的回调函数会被执行
大白话描述:所谓的事件无非就是找个机会(事件触发)调用一个函数(回调函数)。
事件类型
鼠标事件
鼠标触发
- click:单击事件,dblclick:双击事件
- mouseenter:当鼠标移动到元素上时,发生此事件
- mouseleave:当用户将鼠标指针移出元素时,发生此事件
- mousemove:当指针在元素上方移动时,发生此事件。
- mouseup:当用户在元素上释放鼠标按钮时,发生此事件。
- mousedown:当用户在元素上按下鼠标按钮时,发生此事件。
- mouseover:当鼠标移动到元素或其中的子元素上时,发生此事件
- mouseout:当用户将鼠标指针移出元素或其中的子元素时,发生此事件
mouseover 和 mouseout 会有冒泡效果(子到父)
mouseenter 和 mouseleave 没有冒泡效果 (推荐)
<div> <p>123</p> </div> <script> const div = document.querySelector("div") // 监听事件 // mouseenter div.addEventListener('mouseenter', function () { div.style.background = 'skyblue' }) // mouseleave div.addEventListener('mouseleave', function () { div.style.background = 'pink' }) // mousemove div.addEventListener('mousemove', function () { // console.log( Math.random()) }) // mousedown div.addEventListener('mousedown', function () { console.log( 'mousedown') }) // mouseup div.addEventListener('mouseup', function () { console.log('mouseup') }) // mouseover div.addEventListener('mouseover', function () { div.style.background = 'blue' }) // mouseout div.addEventListener('mouseout', function () { div.style.background = 'green' }) </script>
焦点事件
表单获得光标
focus 获得焦点
blur 失去焦点
<input type="text"> <script> const input = document.querySelector('input') // focus:获得焦点 input.addEventListener('focus',function () { input.style.background = 'red' }) // blur:失去焦点 input.addEventListener('blur',function () { input.style.background = 'green' }) </script>
键盘事件
键盘触发
Keydown 键盘按下触发
Keyup 键盘抬起触发
<script> document.addEventListener('mousedown',function () { console.log('mousedown 键盘按下') }) document.addEventListener('mouseup',function () { console.log('mouseup 键盘抬起') }) </script>
文本事件
表单输入触发
input 用户输入事件
<input type="text"> <script> const input = document.querySelector('input') // input:文本事件 input.addEventListener('input',function () { console.log(input.value) }) </script>
事件对象
概念
事件对象:事件触发时产生的对象,这个对象里有事件触发时的相关信息
获取事件对象
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e
事件对象常用属性
- type:获取当前的事件类型
- clientX/clientY获取光标相对于浏览器可见窗口左上角的位置
- offsetX/offsetY:获取光标相对于当前DOM元素左上角的位置
<style> body { height: 3000px; } </style> <script> // e:接收的是事件对象 document.addEventListener('click', function (e) { // e.type:事件类型 console.log(e.type) // clientX,clientY:鼠标相对于浏览器(可视窗口)左上角的位置 console.log(e.clientX,e.clientY) // pageX,pageY:鼠标相对于文档左上角的位置 console.log(e.pageX,e.pageY) // offsetX,offsetY:鼠标相对于当前DOM元素左上角的位置 console.log(e.offsetX,e.offsetY) })
-
key:用户按下的键盘键的值
现在不提倡使用keyCode
document.addEventListener('keydown', function (e) { // key:用户按下的键盘键的值 console.log(e.key) if ( e.key === 'q' ) { console.log('qqqq技能') } // 现在不提倡使用keyCode // ASCII console.log(e.keyCode) })
环境对象
概念
环境对象:指的是函数内部特殊的变量 this ,它代表着当前函数运行时所处的环境
this的指向:调用函数的元素
- 函数的调用方式不同,this 指代的对象也不同,事件处理函数中的this,指代事件源
- 【谁调用, this 就是谁】 是判断 this 指向的粗略规则
- 直接调用函数,其实相当于是 window.函数,所以 this 指代 window
<div>123</div> <p>段落</p> <script> const div = document.querySelector('div') const p = document.querySelector('p') // 事件处理函数中的this,代表事件源 div.addEventListener('click', function () { console.log(this) }) p.addEventListener('click', function () { console.log(this) }) document.addEventListener('click', function () { console.log(this) }) </script>
回调函数
概念
如果将函数 A 做为参数传递给函数 B 时,我们称函数 A 为回调函数,函数B为高级函数
简单理解: 当一个函数当做参数来传递给另外一个函数的时候,这个函数就是回调函数
function fn ( n ) { console.log(n) } function getNum() { console.log('aaa') } fn( 3 ) fn('hellow') fn(getNum)
函数 getNum
做参数传给了 fn
函数,fn
就是所谓的回调函数了!!!
我们回顾一下间歇函数 setInterval
<script> function fn() { console.log('我是回调函数...'); } // 调用定时器 setInterval(fn, 1000); </script>
fn
函数做为参数传给了 setInterval
,这便是回调函数的实际应用了,结合刚刚学习的函数表达式上述代码还有另一种更常见写法。
<script> // 调用定时器,匿名函数做为参数 setInterval(function () { console.log('我是回调函数...'); }, 1000); </script>
结论:
- 回调函数本质还是函数,只不过把它当成参数使用
- 使用匿名函数做为回调函数比较常见
函数分为
具名函数:function 函数名() {}
调用函数:
函数名()
匿名函数: function () {}
匿名函数调用:
- 赋值给变量(函数表达式) const fn = function () {}
- 自调用函数/自执行函数/立即执行函数
;(function () {}())
;(function () {})()
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战