网站导航
> 文章列表 > DOM基础事件

DOM基础事件

网友: 文章列表 2024-03-21 17:59:15

DOM基础事件

1. 事件

事件是编程时系统内发生的动作或者发生的事情，它是用来描述程序的行为或状态的，一旦行为或状态发生改变，便立即调用一个函数。

例如：用户使用【鼠标点击】网页中的一个按钮、用户使用【鼠标拖拽】网页中的一张图片

事件监听

结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。也称绑定事件或者注册事件。

例如：鼠标经过显示下拉菜单、点击可以播放轮播图

addEventListener 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】。

语法：元素对象.addEventListener（'事件类型',要执行的函数）

事件监听三要素：

  • 事件源：那个dom元素被事件触发了，要获取dom元素
  • 事件类型：用什么方式触发，比如鼠标单击 click、鼠标经过mouseover 等
  • 事件调用的函数： 要做什么事
<button>按钮</button>
<script>const btn = document.querySelector(' .btn')// 修改元素样式btn.addEventListener('click', function () {alert("点击了~')
})
</script>

注意:

  1. 事件类型要加引号
  2. 函数是点击之后再去执行，每次点击都会执行一次

2. 事件类型

在这里插入图片描述

鼠标事件

是指跟鼠标操作相关的事件，如单击、双击、移动等。
mouseenter：监听鼠标是否移入 DOM 元素（鼠标经过）
mouseleave：监听鼠标是否移出 DOM 元素（鼠标离开）
click：鼠标点击

<body><h3>鼠标事件</h3><p>监听与鼠标相关的操作</p><hr><div class="box"></div><script>// 需要事件监听的 DOM 元素const box = document.querySelector('.box');// 监听鼠标是移入当前 DOM 元素box.addEventListener('mouseenter', function () {// 修改文本内容this.innerText = '鼠标移入了...';// 修改光标的风格this.style.cursor = 'move';})</script>
</body>

键盘事件

keydown 键盘按下触发
keyup 键盘抬起触发

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="text"><script>const input = document.querySelector('input')// 1. 键盘事件// input.addEventListener('keydown', function () {//   console.log('键盘按下了')// })// input.addEventListener('keyup', function () {//   console.log('键盘谈起了')// })// 2. 用户输入文本事件  inputinput.addEventListener('input', function () {console.log(input.value)})</script>
</body></html>

表单事件

input 用户输入事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>评论回车发布</title><style>.wrapper {min-width: 400px;max-width: 800px;display: flex;justify-content: flex-end;}.avatar {width: 48px;height: 48px;border-radius: 50%;overflow: hidden;background: url(./images/avatar.jpg) no-repeat center / cover;margin-right: 20px;}.wrapper textarea {outline: none;border-color: transparent;resize: none;background: #f5f5f5;border-radius: 4px;flex: 1;padding: 10px;transition: all 0.5s;height: 30px;}.wrapper textarea:focus {border-color: #e4e4e4;background: #fff;height: 50px;}.wrapper button {background: #00aeec;color: #fff;border: none;border-radius: 4px;margin-left: 10px;width: 70px;cursor: pointer;}.wrapper .total {margin-right: 80px;color: #999;margin-top: 5px;opacity: 0;transition: all 0.5s;}.list {min-width: 400px;max-width: 800px;display: flex;}.list .item {width: 100%;display: flex;}.list .item .info {flex: 1;border-bottom: 1px dashed #e4e4e4;padding-bottom: 10px;}.list .item p {margin: 0;}.list .item .name {color: #FB7299;font-size: 14px;font-weight: bold;}.list .item .text {color: #333;padding: 10px 0;}.list .item .time {color: #999;font-size: 12px;}</style>
</head><body><div class="wrapper"><i class="avatar"></i><textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea><button>发布</button></div><div class="wrapper"><span class="total">0/200字</span></div><div class="list"><div class="item" style="display: none;"><i class="avatar"></i><div class="info"><p class="name">清风徐来</p><p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p><p class="time">2022-10-10 20:29:21</p></div></div></div><script>const tx = document.querySelector('#tx')const total = document.querySelector('.total')// 1. 当我们文本域获得了焦点，就让 total 显示出来tx.addEventListener('focus', function () {total.style.opacity = 1})// 2. 当我们文本域失去了焦点，就让 total 隐藏出来tx.addEventListener('blur', function () {total.style.opacity = 0})// 3. 检测用户输入tx.addEventListener('input', function () {// console.log(tx.value.length)  得到输入的长度total.innerHTML = `${tx.value.length}/200字`})// const str = 'andy'// console.log(str.length)</script>
</body></html>

焦点事件

focus 获得焦点

blur 失去焦点

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="text"><script>const input = document.querySelector('input')input.addEventListener('focus', function () {console.log('有焦点触发')})input.addEventListener('blur', function () {console.log('失去焦点触发')})</script>
</body></html>

3. 事件对象

任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。

  • 事件绑定的回调函数的【第1个参数】即所谓的事件对象
  • 通常习惯性的将这个对数命名为 event、ev 、e 。

获取事件对象：元素.addEventListener('click',function(e){})

部分常用属性
type：获取当前的事件类型
clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置
key：用户按下的键盘键的值。现在不提倡使用keyCode

4. 环境对象

环境对象:指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境。

作用：弄清楚this的指向，可以让我们代码更简洁

结论：

  1. this 本质上是一个变量，数据类型为对象
  2. 函数的调用方式不同 this 变量的值也不同
  3. 谁调用 this 就是谁是判断 this 值的粗略规则
  4. 函数直接调用时实际上 window.sayHi() 所以 this 的值为 window

5. 回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数。

简单理解：当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数

常见的使用场景：

<script>function fn() {console.log('我是回调函数...');}// fn传递给了setInterval，fn就是回调函数setInterval(fn, 1000);
</script>

结论：

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

相关问题