文章目录
- 事件监听
- 事件类型
- 鼠标触发类型案例——轮播图
- 表单获得光标类型类型案例——点击搜索框获得下拉表单
- 键盘触发类型效果展示
- 表单输入触发类型案例——统计表单字符数量
- 事件对象
- 常用属性
- 环境对象
- 回调函数
事件监听
事件：在编程时系统内发生的动作，比如用户在网页上单击一个按钮。
事件监听：让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也被称为绑定事件或注册事件。比如鼠标经过时显示下拉菜单，比如点击可以播放轮播图等。
语法：元素对象.addEventListener('事件类型', 要执行的函数)
事件监听三要素：
- 事件源：被触发的元素
- 事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等
- 事件调用的函数：要做什么事
const but = document.querySelector('button')
but.addEventListener('click', function () {alert('welcome')
})
on方式div.onclick = function(){}同样可以实现事件监听，但会被覆盖，addEventListener方式可以绑定多次。
事件类型
- 鼠标触发
- click：鼠标点击
- mouseenter：鼠标经过
- mouseleave：鼠标离开
- 表单获得光标
- focus：获得焦点
- blur：失去焦点
- 键盘触发
- Keydown：键盘按下触发
- Keyup：键盘抬起触发
- 表单输入触发
- input：用户输入事件
鼠标触发类型案例——轮播图
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.con div {width: 200px;height: 200px;background-size: 200px 200px;}ul {list-style: none;}li {width: 5px;height: 5px;border-radius: 50%;background-color: blue;float: left;margin: 0 5px;vertical-align: middle;}ul {display: flex;align-items: center;}.active {width: 8px;height: 8px;}</style>
</head><body><div class="con"><div></div><ul><li class="active"></li><li></li><li></li><button class="last">last</button><button class="next">next</button></ul></div><script>const arr = ['url(../图片/微信图片_20231114204518.jpg)', 'url(../图片/微信图片_20231114204634.jpg)', 'url(../图片/微信图片_20231114204549.jpg)'] // 图片链接记得加url()let i = 0;const back = document.querySelector('.con div')back.style.backgroundImage = arr[i]let li = document.querySelector(`ul li:nth-child(${i + 1})`)function xyg() {li.classList.remove('active')i++if (i == 3) {i = 0}back.style.backgroundImage = arr[i]li = document.querySelector(`ul li:nth-child(${i + 1})`)li.classList.add('active')}let n = setInterval(xyg, 2000)const next = document.querySelector('.next')next.addEventListener('click', xyg)const last = document.querySelector('.last')last.addEventListener('click', function () {li.classList.remove('active')i--if (i == -1) {i = 2}back.style.backgroundImage = arr[i]li = document.querySelector(`ul li:nth-child(${i + 1})`)li.classList.add('active')})const con = document.querySelector('.con')con.addEventListener('mouseenter', function () {clearInterval(n)})con.addEventListener('mouseleave', function () {n = setInterval(xyg, 2000)})</script>
</body></html>
表单获得光标类型类型案例——点击搜索框获得下拉表单
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {position: relative;width: 200px;margin: 0 auto;}* {padding: 0;margin: 0;}ul {list-style: none;}.list {border: 1px solid #bbb;display: none;position: absolute;left: 0;top: 21px;}li {border-bottom: 1px solid #bbb;width: 80px;}</style>
</head><body><div class="box"><input type="text" name="" id=""><div class="list"><ul><li>1111</li><li>2222</li><li>3333</li><li>4444</li><li>5555</li></ul></div></div><script>const list = document.querySelector('.list')function fn() {list.style.display = 'block'}function kn() {list.style.display = 'none'}const inp = document.querySelector('input')inp.addEventListener('focus', fn)inp.addEventListener('blur', kn)</script>
</body></html>
键盘触发类型效果展示
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><input type="text" name="" id=""><script>const inp = document.querySelector('input')inp.addEventListener('keydown', function () {console.log('按下键盘');})inp.addEventListener('keyup', function () {console.log('键盘弹起');})</script>
</body></html>
表单输入触发类型案例——统计表单字符数量
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.text {position: relative;width: 200px;height: 100px;margin: 100px auto;}textarea {width: 200px;height: 100px;resize: none;}.text div {position: absolute;color: #ccc;bottom: 0;right: 0;width: 50px;height: 20px;opacity: 0;font-size: 10px;}</style>
</head><body><div class="text"><textarea name="" id=""></textarea><div>0/300</div></div><script>const text = document.querySelector('textarea')const div = document.querySelector('.text div')text.addEventListener('focus', function () {div.style.opacity = 1div.innerHTML = `${text.value.length} / 300`})text.addEventListener('blur', function () {div.style.opacity = 0})text.addEventListener('input', function () {div.innerHTML = `${text.value.length} / 300`})</script>
</body></html>
事件对象
事件对象也是个对象，这个对象里有事件触发时的相关信息，例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息。
使用场景：
- 可以判断用户按下哪个键，比如按下回车键可以发送消息
- 可以判断鼠标点击了哪个元素，从而做出相应的操作
在事件绑定的回调函数的第一个参数就是事件对象：元素.addEventListener('click',function (e){}) // e是事件对象
常用属性
- type：获取当前事件类型
- clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置
- offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置
- key：用户按下键盘的值（现在不提倡使用keyCode）
环境对象
环境对象指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境，this指向函数的调用者。
普通函数里this指向的是window。
回调函数
如果将函数A作为参数传递给函数B时，我们称函数A为回调函数。
function fn() { // 这是一个回调函数list.style.display = 'block'}const inp = document.querySelector('input')inp.addEventListener('focus', fn)
![[力扣题解]134. 加油站](http://pic.xiahunao.cn/[力扣题解]134. 加油站)
