事件监听（绑定）
事件和事件监听
- 事件是在编程时系统内发生的动作或者发生的事情，比如用户在网页上单击一个按钮
- 让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件
比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等
语法
元素对象.addEventListener（'事件类型'，要执行的函数）
注意：
- 事件类型要加引号
- 函数是点击之后再去执行，每
次点击都会执行一次
三要素
- 事件源： 那个dom元素被事件触发了，要获取dom元素
- 事件类型： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
- 事件调用的函数： 要做什么事
<button>点击</button>
<script>
// 需求：点击按钮，弹出对话框
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
alert('good morining')
})
</script>
关闭广告
<div class="box">
广告
<button>X</button>
</div>
<script>
// 需求：点击按钮，关闭box
const btn = document.querySelector('button')
const box = document.querySelector('.box')
btn.addEventListener('click', function () {
box.style.display = 'none'
})
</script>
核心：利用样式的显示和隐藏完成， display:none 隐藏元素 display:block 显示元素
随机点名案例
<body>
<h3>随机点名</h3>
<div class="box">
<span>名字是：</span><span class="uname">小李</span>
<button class="open">open</button>
<button class="close">close</button>
</div>
<script>
const arr = ['小李', '小王', '小朱', '小杨', '小苏', '小赵']
const uname = document.querySelector('.uname')
// 定时器的全局变量
let timeId = 0
// 开始
const open = document.querySelector('.open')
open.addEventListener('click', function () {
timeId = setInterval(function () {
const random = parseInt(Math.random() * arr.length)
uname.innerHTML = arr[random]
}, 35)
})
const close = document.querySelector('.close')
close.addEventListener('click', function () {
clearInterval(timeId)
})
- 关闭定时器时无法调用timeId，这是因为他为局部变量。解决方法是定义定时器的全局变量
事件类型
鼠标篇
- click ——鼠标点击
- mouseenter—— 鼠标经过
- mouseleave ——鼠标离开
轮播图点击切换
鼠标点击切换图片
const img = document.querySelector('.slider-wrapper img')
const p = document.querySelector('.slider-footer p')
const bg = document.querySelector('.slider-footer')
// 1.右侧按钮
const next = document.querySelector('.next')
// 信号量 控制播放器图片张数
let i = 0
// 1.2点击事件
next.addEventListener('click', function () {
i++
if (i >= sliderData.length) {
i = 0
}
// 调用函数
toggle()
})
// 2.左侧
const prev = document.querySelector('.prev')
// 1.2点击事件
prev.addEventListener('click', function () {
i--
if (i < 0) {
i = sliderData.length - 1
}
// 调用函数
toggle()
})
// 声明渲染函数
function toggle() {
img.src = sliderData[i].url
p.innerHTML = sliderData[i].title
bg.style.backgroundColor = sliderData[i].color
// 更换小圆点
document.querySelector('.slider-indicator .active').classList.remove('active')
document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
}
- 声明渲染函数缩减代码
自动播放图片；鼠标经过或离开，开启或关闭定时器
// 自动播放
let timeId = setInterval(function () {
// 利用JS调用点击事件 click()
next.click()
}, 1000)
// 鼠标经过大盒子,停止定时器
const slider = document.querySelector('.slider')
slider.addEventListener('mouseenter', function () {
// 停止定时器
clearInterval(timeId)
})
// 鼠标离开大盒子,开启定时器
slider.addEventListener('mouseleave', function () {
// 开启定时器
timeId = setInterval(function () {
// 利用JS调用点击事件 click()
next.click()
}, 1000)
})
- 利用JS调用点击事件click()
焦点篇（表单获得光标）
- focus ——获得焦点
- blur ——失去焦点
<input type="text">
<script>
const input = document.querySelector('input')
input.addEventListener('focus', function () {
console.log('❤❤❤');
})
input.addEventListener('blur', function () {
console.log('
标签：pink,function,const,Dom,笔记,querySelector,addEventListener,input,document
From： https://www.cnblogs.com/Z2201210269/p/17844663.html