DOM事件

事件监听

概念

事件:事件是在编程时系统内发生的动作或者发生的事情

事件监听:是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为 绑定事件或者注册事件

使用

语法:元素对象.addEventListener('事件类型', 函数)

事件监听三要素:

  • 事件源: 触发事件的元素
  • 事件类型: 触发事件的动作/行为,比如鼠标单击 click、鼠标经过 mouseover 等
  • 事件调用的函数: 要做什么事,执行代码

注意:

  1. 事件类型要加引号
  2. 函数是触发之后再去执行,每次触发都会执行一次
    • 函数写法1:function() {执行代码}
    • 函数写法2:函数名 注意:不加小括号,加小括号立即执行,这里是触发执行
<input type="button" value="点击">
<script>
// 获取元素
const btn = document.querySelector('input')
btn.addEventListener('click',function () {
console.log('hellow~')
})
</script>

完成事件监听分成3个步骤:

  1. 获取 DOM 元素
  2. 通过 addEventListener 方法为 DOM 节点添加事件监听
  3. 等待事件触发,如用户点击了某个按钮时便会触发 click 事件类型,事件触发后,相对应的回调函数会被执行

大白话描述:所谓的事件无非就是找个机会(事件触发)调用一个函数(回调函数)。

事件类型

鼠标事件

鼠标触发

  1. click:单击事件,dblclick:双击事件
  2. mouseenter:当鼠标移动到元素上时,发生此事件
  3. mouseleave:当用户将鼠标指针移出元素时,发生此事件
  4. mousemove:当指针在元素上方移动时,发生此事件。
  5. mouseup:当用户在元素上释放鼠标按钮时,发生此事件。
  6. mousedown:当用户在元素上按下鼠标按钮时,发生此事件。
  7. mouseover:当鼠标移动到元素或其中的子元素上时,发生此事件
  8. 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

事件对象

事件对象常用属性

  1. type:获取当前的事件类型
  2. clientX/clientY获取光标相对于浏览器可见窗口左上角的位置
  3. 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)
})
  1. 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的指向:调用函数的元素

  1. 函数的调用方式不同,this 指代的对象也不同,事件处理函数中的this,指代事件源
  2. 【谁调用, this 就是谁】 是判断 this 指向的粗略规则
  3. 直接调用函数,其实相当于是 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>

结论:

  1. 回调函数本质还是函数,只不过把它当成参数使用
  2. 使用匿名函数做为回调函数比较常见

函数分为

  • 具名函数:function 函数名() {}

    调用函数:函数名()

  • 匿名函数: function () {}

    匿名函数调用:

    1. 赋值给变量(函数表达式) const fn = function () {}
    2. 自调用函数/自执行函数/立即执行函数

;(function () {}())

;(function () {})()

posted @   丫丫learning  阅读(42)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示