一、事件监听(绑定)
1.事件监听
-
什么是事件?
事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮 -
什么是事件监听
就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出相应,也称为绑定事件或者注册事件
比如鼠标经过显示下拉菜单,比如点击可以播放轮播图等等 -
语法:
-
事件监听三要素
- 事件源:哪个dom元素被事件触发了,要获取dom元素
- 事件类型:用什么方式触发,比如鼠标单击click、鼠标经过mouseover等
- 事件调用的函数:要做什么事
<body>
<button>按钮</button>
<script>
const cs = document.querySelector('button')
cs.addEventListener('click', function () {
alert('点击了')
})
</script>
</body>
- 注意:
1.事件类型要加引号
2.函数时点击之后再去执行,每次点击都会执行一次
案例-关闭广告
<body>
<div class="box">
我是广告
<div class="box1">X</div>
</div>
<script>
// 1. 获取事件源
const box1 = document.querySelector('.box1')
// 关闭的是大盒子
const box = document.querySelector('.box')
// 2. 事件侦听
box1.addEventListener('click', function () {
box.style.display = 'none'
})
</script>
</body>
案例-随机点名
<body>
<h2>随机点名</h2>
<div class="box">
<span>名字是:</span>
<div class="qs">这里显示姓名</div>
</div>
<div class="btns">
<button class="start">开始</button>
<button class="end">结束</button>
</div>
<script>
const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
const qs = document.querySelector('.qs')
const start = document.querySelector('.start')
const end = document.querySelector('.end')
let n = 0
let random = 0
//添加点击事件
start.addEventListener('click', function () {
n = setInterval(function () {
//给随机数赋值
random = parseInt(Math.random() * arr.length)
qs.innerHTML = arr[random]
}, 100)
//如果数组仅有一个值,不需要抽了,将两个按钮禁用
if (arr.length === 1) {
start.disabled = true
end.disabled = true
}
})
//添加点击事件
end.addEventListener('click', function () {
clearInterval(n)
//将抽出来的值从数组中删除
arr.splice(arr[random], 1)
console.log(arr)
})
</script>
</body>
2.拓展阅读-事件监听版本
- DOM L0
事件源.on事件 = function(){} - DOM L2
事件源.addEventListener(事件,事件处理函数) - 区别:
on方式会被覆盖,addEventListener方式可绑定多次,拥有事件更多特性,推荐使用
二、事件类型
<script>
const div = document.querySelector('div')
//鼠标经过
div.addEventListener('mouseenter', function () {
alert('我来了')
})
//鼠标离开
div.addEventListener('mouseleave', function () {
alert('我走了')
})
</script>
轮播图案例
需求:当点击左右按钮,可以切换轮播图
<script>
// 1. 初始数据
const data = [
{ url: '../images/slider01.jpg', title: '对人类来说会不会太超前了?', color: 'rgb(100, 67, 68)' },
{ url: '../images/slider02.jpg', title: '开启剑与雪的黑暗传说!', color: 'rgb(43, 35, 26)' },
{ url: '../images/slider03.jpg', title: '真正的jo厨出现了!', color: 'rgb(36, 31, 33)' },
{ url: '../images/slider04.jpg', title: '李玉刚:让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
{ url: '../images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
{ url: '../images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
{ url: '../images/slider07.jpg', title: '一站式解决你的电脑配置问题!!!', color: 'rgb(53, 29, 25)' },
{ url: '../images/slider08.jpg', title: '谁不想和小猫咪贴贴呢!', color: 'rgb(99, 72, 114)' },
]
//获取元素
const color = document.querySelector('.slider-footer')
const p = document.querySelector('.slider-footer p')
const img = document.querySelector('.slider-wrapper img')
//1.右按钮业务
//1.1获取右侧按钮
const next = document.querySelector('.next')
let i = 0 //信号量 控制播放图片张数
//1.2注册点击事件
next.addEventListener('click', function () {
i++
//判断i是否大于8 ,大于就复原为0
i = i >= data.length ? 0 : i
//调用函数
toggle()
})
//1.左按钮业务
//1.1获取左侧按钮
const prev = document.querySelector('.prev')
//1.2注册点击事件
prev.addEventListener('click', function () {
i--
//判断i是否小于0 ,小于就跑到最后一张图片 索引号是7
i = i < 0 ? data.length - 1 : i
//调用函数
toggle()
})
//声明一个渲染的函数作为复用
function toggle() {
//1.4渲染对应的数据
img.src = data[i].url
p.innerHTML = data[i].title
color.style.backgroundColor = data[i].color
//1.5更换小圆点 先移除原来的类名,当前li再添加这个类名
document.querySelector('.slider-indicator .active').classList.remove('active')
document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
}
//3.自动播放
let timeId = setInterval(function () {
//利用js自动调用点击时间
next.click()
}, 1000)
//4.鼠标经过大盒子,停止定时器
const slider = document.querySelector('.slider')
//注册事件
slider.addEventListener('mouseenter', function () {
//停止计时器
clearInterval(timeId)
})
//4.鼠标离开大盒子,开启定时器
slider.addEventListener('mouseleave', function () {
//停止计时器
clearInterval(timeId)
//开计时器
timeId = setInterval(function () {
//利用js自动调用点击时间
next.click()
}, 1000)
})
</script>
焦点事件
<body>
<div class="mi">
<input type="search" placeholder="小米笔记本">
<ul class="result-list">
<li><a href="#">全部商品</a></li>
<li><a href="#">小米11</a></li>
<li><a href="#">小米10S</a></li>
<li><a href="#">小米笔记本</a></li>
<li><a href="#">小米手机</a></li>
<li><a href="#">黑鲨4</a></li>
<li><a href="#">空调</a></li>
</ul>
</div>
<script>
//1.获取元素
const ul = document.querySelector('.result-list')
const input = document.querySelector('input')
//2.监听事件 获得焦点
input.addEventListener('focus', function () {
ul.style.display = 'block'
//添加带有颜色边框的类名
input.classList.add('search')
})
//2.监听事件 获得焦点
input.addEventListener('blur', function () {
ul.style.display = 'none'
input.classList.remove('search')
})
</script>
</body>
键盘事件
文本事件
<body>
<input type="text">
<script>
const input = document.querySelector('input')
input.addEventListener('keydown', function () {
console.log('键盘按下了')
})
input.addEventListener('keyup', function () {
console.log('键盘弹起了')
})
input.addEventListener('input', function () {
console.log(input.value)
})
</script>
</body>
案例:
需求:用户输入文字,可以计算用户输入的字数
<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 () {
total.innerHTML = `${tx.value.length}/200字`
})
</script>
</body>
三、事件对象
获取事件对象
- 事件对象是什么
- 也是个对象,这个对象里面有事件触发时的相关信息
- 例如:鼠标点击事件中,事件对象就存储了鼠标点在哪个位置等信息
- 使用场景
- 可以判断用户按下哪个键,比如按下回车键可以发布新闻
- 可以判断鼠标点击了哪个元素,从而做出相应的操作
- 语法:如何获取
- 在事件绑定的回调函数的第一个参数就是事件对象
- 一般命名为event、ev、e
事件对象常用属性
- 部分属性
- type
- 获取当前的事件类型
- clientX / clientY
- 获取光标相对于浏览器可见窗口左上角的位置
- key
- 用户按下的键盘键的值
- 现在不提倡使用keyCode
- type
<body>
<input type="text">
<script>
const input = document.querySelector('input')
input.addEventListener('keyup', function (e) {
if (e.key === 'Enter') {
console.log('我按了')
}
})
</script>
</body>
案例
需求:按下回车键盘,可以发布消息
分析:
①:用到按下键盘时间keydown或者keyup都可以
②:如果用户按下的是回车键盘,则发布信息
③:让留言模块显示,把拿到的数据渲染到对应的标签内部
<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 item = document.querySelector('.item')
const total = document.querySelector('.total')
const text = document.querySelector('.text')
//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 () {
total.innerHTML = `${tx.value.length}/200字`
})
//4.按下回车发布评论
tx.addEventListener('keyup', function (e) {
//只有按下回车键,才会触发
if (e.key === 'Enter') {
if (tx.value.trim() !== '') {
item.style.display = 'block'
text.innerHTML = tx.value
}
//等按下回车,结束,清空
tx.value = ''
//把字符统计复原
total.innerHTML = '0/200字'
}
})
</script>
</body>
四、环境对象
-
环境对象:指的是函数内部特殊的变量this,它代表着当前函数运行所处的环境
-
作用:弄清楚this的指向,可以让我们代码更简洁
- 函数的调用方式不同,this指代的对象也不同
- **[谁调用,this就是谁]**是判断this指向的粗略规则
- 直接调用函数,其实相当于是widow函数,所以this指代window
五、回调函数
如果将函数A作为参数传递给函数B时,我们称函A为回调函数
综合案例 Tab栏切换
需求:鼠标经过不同的选项卡,底部可以显示不同的内容
<body>
<div class="tab">
<div class="tab-nav">
<h3>每日特价</h3>
<ul>
<li><a class="active" href="javascript:;">精选</a></li>
<li><a href="javascript:;">美食</a></li>
<li><a href="javascript:;">百货</a></li>
<li><a href="javascript:;">个护</a></li>
<li><a href="javascript:;">预告</a></li>
</ul>
</div>
<div class="tab-content">
<div class="item active"><img src="../images/tab00.png" alt="" /></div>
<div class="item"><img src="../images/tab01.png" alt="" /></div>
<div class="item"><img src="../images/tab02.png" alt="" /></div>
<div class="item"><img src="../images/tab03.png" alt="" /></div>
<div class="item"><img src="../images/tab04.png" alt="" /></div>
</div>
</div>
<script>
//1.s模块制作 要给5个链接绑定鼠标经过事件
//1.1获取a元素
const as = document.querySelectorAll(".tab-nav a")
for (let i = 0; i < as.length; i++) {
as[i].addEventListener('mouseenter', function () {
//console.log('鼠标经过')
//排他思想
// 排他思想
// 干掉别人 移除类active
document.querySelector('.tab-nav .active').classList.remove('active')
// 添加类 active this 当前的那个 a
this.classList.add('active')
//下面5个大盒子 一一对应 .item
document.querySelector('.tab-content .active').classList.remove('active')
document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
})
}
</script>
</body>