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 () {})()