Dom事件基础（pink老师课程笔记）
事件监听（绑定）
事件和事件监听
- 事件是在编程时系统内发生的动作或者发生的事情，比如用户在网页上单击一个按钮
- 让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件
比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等
语法
元素对象.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('🚫🚫🚫');
})
</script>
小米下拉列表
const input = document.querySelector('input')
const ul = document.querySelector('.list')
input.addEventListener('focus', function () {
ul.style.display = 'block'
input.classList.add('search')
})
input.addEventListener('blur', function () {
ul.style.display = 'none'
input.classList.remove('search')
})
- input点击去掉黑框——
outline: none;
键盘篇
- Keydown ——键盘按下触发
- Keyup ——键盘抬起触发
文本篇（表单输入文本）
- input ——用户输入事件
<input type="text">
<script>
const input = document.querySelector('input')
input.addEventListener('input', function () {
//打印输入的内容
console.log(input.value)
})
</script>
- input.value——文本域的输入内容
检测用户输入的字数
const total = document.querySelector('.total')
const tx = document.querySelector('#tx')
// 文本域获得焦点，total显示出来；否则隐藏
tx.addEventListener('focus', function () {
// 透明度
total.style.opacity = 1
})
tx.addEventListener('blur', function () {
total.style.opacity = 0
})
// 不断取得文本框里面的字符长度
tx.addEventListener('input', function () {
total.innerHTML = `${tx.value.length} / 200字`
})
- 文本域的长度：文本域.value.length
- 点击input表单后才能获取
input:focus{background-color:yellow;} - 字符串也有长度
total.innerHTML = ${tx.value.length} / 200字
事件对象
也是个对象，这个对象里有事件触发时的相关信息
比如按下回车键可以发布新闻；按下删除键进行删除
语法
元素.addEventListener('click',function(e){})
- 在事件绑定的回调函数的第一个参数就是事件对象
- 一般命名为event、ev、e
属性
- type
获取当前的事件类型 - clientX/clientY
获取光标相对于浏览器可见窗口左上角的位置 - offsetX/offsetY
获取光标相对于当前DOM元素左上角的位置 - key
用户按下的键盘键的值
评论回车发布
// 按下回车发布评论
const item = document.querySelector('.item')
const text = document.querySelector('.text')
tx.addEventListener('keyup', function (e) {
// console.log(e.key)
if (e.key === 'Enter') {
if (tx.value.trim() !== '') {
item.style.display = 'block'
text.innerHTML = tx.value
}
// 按下回车后，清空文本域,字符统计复原
tx.value = ''
total.innerHTML = '0/200字'
}
})
- 用到按下键盘事件 keydown 或者 keyup 都可以
- str.trim()——去除string左右两侧的空格
环境对象this
函数内部特殊的 变量 this ，它代表着当前函数运行时所处的环境
作用：弄清楚this的指向，可以让我们代码更简洁
- 函数的调用方式不同，this 指代的对象也不同
- 【谁调用， this 就是谁】 是判断 this 指向的粗略规则
- 直接调用函数，其实相当于是 window.函数，所以 this 指代 window
// 每个函数里面都有this 环境对象
/* function fn() {
console.log(this) //指向window
}
fn() */
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
console.log(this) //指向btn
})
回调函数
如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数
function fn() {
console.log('我是回调函数')
}
setInterval(fn, 1000)
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
console.log('我也是回调函数')
})
- 回调函数本质还是函数，只不过把它当成参数使用
- 使用匿名函数做为回调函数比较常见
综合案例
const a = document.querySelectorAll('.tab-nav a')
// 遍历,绑定鼠标经过
for (let i = 0; i < a.length; i++) {
a[i].addEventListener('mouseenter', function () {
document.querySelector('.tab-nav .active').classList.remove('active')
// this===a[i]
this.classList.add('active')
document.querySelector('.tab-content .active').classList.remove('active')
document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
})
}
点击按钮随机切换照片
<input type="button" value="切换" id="btn"><br>
<img src="images/1.jpg" width="300" id="img">
<script>
const arr = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg"]
function getRandom(min, max) {
return parseInt(Math.random() * (max - min + 1)) + min
}
const btn = document.querySelector('#btn')
const img = document.querySelector('#img')
btn.addEventListener('click', function () {
let random = getRandom(0, arr.length - 1)
img.src = arr[random]
})
</script>
- Math首字母大写
同意协议按钮可用，否则禁用
//复选框
const check = document.querySelector('#agree')
//同意注册按钮
const Btn = document.querySelector('#registerBtn')
check.addEventListener('click', function () {
Btn.disabled = !this.checked
})
- 如果复选框选中，按钮就启用，如果复选框不选中，按钮就禁用
- 复选框选中是true， 按钮启用 disable 是false
验证码倒计时
const btn = document.querySelector('#btn')
//点击之后，禁用按钮，开启倒计时
btn.addEventListener('click', function () {
btn.disabled = true
//控制显示数字
let i = 6
let timeID = setInterval(function () {
i--
btn.innerHTML = `${i}秒之后重新获取`
if (i <= 0) {
clearInterval(timeID)
btn.disabled = false
btn.innerHTML = '获取验证码'
}
}, 1000)
})
- 定时器内部不能使用this
隐藏显示密码
<div class="box">
<label for=""></label>
<input type="password" name="" id="pwd">
</div>
<script>
const label = document.querySelector('label')
const pwd = document.querySelector('#pwd')
// 声明变量控制密码的显隐
let flag = true
label.addEventListener('click', function () {
label.classList.toggle('active')
if (flag) {
pwd.type = 'text'
// flag = false
} else {
pwd.type = 'password'
// flag = true
}
flag = !flag
})
- 因为要修改input的 type属性 text和password，可以使用一个变量来控制 flag ， 如果为true 就切换为text ，如果为false就修改为 password
