1.事件
（1）事件监听（又称事件注册）
<1>事件三要素
· 事件源
· 事件类型
· 事件处理函数
<body>
<button>按钮</button>
<!-- \.vscode\事件.html -->
<script>
//点击按钮 弹出警示框 alert()
//alert()
const btn = document.querySelector('button');
//事件监听的方式注册时间
//btn.addEventListener('事件类型', 事件处理函数)
let i = 0
btn.addEventListener('click', function
() {
i++
alert('我被点击了' + i + '次')//当点击按钮，就会触发这个函数
}
)
</script>
</body>
结果：
<2>回调函数
注意：回调函数本质还是函数，只不过把它当做参数使用
<3>事件监听版本
..1..DOM L0: 事件.on事件类型=function（）{}
..2..DOM L2：事件源.addEvenTListener(事件类型，事件处理函数)
..3..区别：
1.L0 on方式同名事件会被覆盖，addEventListener则不会，同时拥有事件更多特性，推荐使用
//L0
//事件版本介绍
const btn = document.querySelector('button')
//1.L0 事件源.on事件类型=事件处理函数
//注意：他会覆盖同名事件
btn.onclick = function () {
console.log('狗哥无敌')
}
btn.onclick = function () {
console.log('猫弟无敌')
}
let num = 10
L0结果：
1.L2
//2.L2 事件监听
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
console.log('狗哥无敌')
})
btn.addEventListener('click', function () {
console.log('猫弟无敌')
})
//两次都会打印 不会覆盖同名事件
L2结果：
..4..事件监听版本发展史
（2）事件类型
<1>点击（click）
<style>
div {
width: 300px;
height: 300px;
background-color: aqua;
text-align: center;
line-height: 300px;
color: yellow;
font-size: 30px;
margin: 100px auto;
}
</style>
</head>
<body>
<button>请点击此处</button>
<div>我是div</div>
<script>
//鼠标事件
const div = document.querySelector('div');
//1.点击 click
div.addEventListener('click', function () {//回调函数（事件处理函数）
console.log('click');
})
})
</script>
</body>
<2>鼠标经过（鼠标进入）
<style>
div {
width: 300px;
height: 300px;
background-color: aqua;
text-align: center;
line-height: 300px;
color: yellow;
font-size: 30px;
margin: 100px auto;
}
</style>
</head>
<body>
<button>请点击此处</button>
<div>我是div</div>
<script>
//鼠标事件
const div = document.querySelector('div');
//2.鼠标经过/鼠标进入 mouseenter
div.addEventListener('mouseenter', function () {
console.log('我经过了');
})
</script>
</body>
<3>鼠标离开
<style>
div {
width: 300px;
height: 300px;
background-color: aqua;
text-align: center;
line-height: 300px;
color: yellow;
font-size: 30px;
margin: 100px auto;
}
</style>
</head>
<body>
<button>请点击此处</button>
<div>我是div</div>
<script>
//鼠标事件
const div = document.querySelector('div');
//3.鼠标离开 mouseleave
div.addEventListener('mouseleave', function () {
console.log('我离开了');
})
</script>
</body>
(3)案例：点击切换轮播图
·点击切换图片
·图片自动轮播
·鼠标经过时停止轮播
<!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>
* {
box-sizing: border-box;
}
.slider {
width: 560px;
height: 400px;
overflow: hidden;
position: relative;
}
.slider-wrapper {
width: 100%;
height: 320px;
}
.slider-wrapper img {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.slider-wrapper img.active {
opacity: 1;
}
.slider-footer {
height: 80px;
background-color: rgb(100, 67, 68);
padding: 12px 12px 0 12px;
position: relative;
}
.slider-footer .toggle {
position: absolute;
right: 0;
top: 12px;
display: flex;
}
.slider-footer .toggle button {
margin-right: 12px;
width: 28px;
height: 28px;
appearance: none;
border: none;
background: rgba(255, 255, 255, 0.1);
color: #fff;
border-radius: 4px;
cursor: pointer;
}
.slider-footer .toggle button:hover {
background: rgba(255, 255, 255, 0.2);
}
.slider-footer p {
margin: 0;
color: #fff;
font-size: 18px;
margin-bottom: 10px;
}
.slider-indicator {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
}
.slider-indicator li {
width: 8px;
height: 8px;
margin: 4px;
border-radius: 50%;
background: #fff;
opacity: 0.4;
cursor: pointer;
}
.slider-indicator li.active {
width: 12px;
height: 12px;
opacity: 1;
}
</style>
</head>
<body>
<div class="slider">
<div class="slider-wrapper">
<img src="./img/njs1.jpg" alt="" class="active" />
<img src="./img/njs2.jpg" alt="" />
<img src="./img/njs3.jpg" alt="" />
<img src="./img/njs4.jpg" alt="" />
<img src="./img/njs5.jpg" alt="" />
</div>
<div class="slider-footer">
<p>？</p>
<ul class="slider-indicator">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="toggle">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
<script>
// 初始数据
const sliderData = [
{ url: './img/njs1.jpg', title: 'ASAP', color: 'rgb(100, 67, 68)' },
{ url: './img/njs2.jpg', title: 'Ditto', color: 'rgb(43, 35, 26)' },
{ url: './img/njs3.jpg', title: 'OMG', color: 'rgb(36, 31, 33)' },
{ url: './img/njs4.jpg', title: 'Attention', color: 'rgb(139, 98, 66)' },
{ url: './img/njs5.jpg', title: 'Cool With U', color: 'rgb(67, 90, 92)' },
];
//2.点击右侧按钮，顺序播放下一张（无缝衔接）
//定义计数器
let i = 0;
//2.1 获取元素
const next = document.querySelector('.next');
const img = document.querySelector('.slider-wrapper img');//图片
const footer = document.querySelector('.slider-footer');
const p = footer.querySelector('p');//文本盒子 直接在fotter中获取
//2.2绑定事件 事件注册
next.addEventListener('click', function () {
//2.3每次点击右侧按钮，让计数器i++
i++;
//2.4通过计数器找到对象数组中需要的对象
toggle()
})
//3.点击左侧按钮，顺序播放上一张（无缝衔接）
//3.1 获取元素 左侧按钮prev
const prev = document.querySelector('.prev');
//3.2绑定事件
prev.addEventListener('click', function () {
//3.3每次点击左侧按钮，让计数器i--
i--;
toggle()
})
//4.开启定时器，自动轮播
let timerID = setInterval(function () {
//执行的时候事情和next执行事件是一样的
//所以调用next的点击事件 对象.click()
next.click();
}, 1000)
//5.鼠标经过 暂停播放
//鼠标离开，暂停播放
//5.1获取元素
const slider = document.querySelector('.slider');
//5.2给元素事件监听
//5.3停止轮播==》关闭定时器
slider.addEventListener('mouseenter', function () {
clearInterval(timerID);
})
//5.4开启轮播==》开启定时器
slider.addEventListener('mouseleave', function () {
timerID = setInterval(function () {
//执行的时候事情和next执行事件是一样的
//所以调用next的点击事件 对象.click()
next.click();
}, 1000)
})
//封装函数 修改页面内容
function toggle() {
//判断计数器阀值（加减都适用）
i = (i + sliderData.length) % sliderData.length;
// 3.4 根据计数器获取对象
const obj = sliderData[i];
// 3.5 修改页面内容
img.src = obj.url;
footer.style.backgroundColor = obj.color;
p.innerHTML = obj.title;
// 小圆点操作
// 先清除所有小圆点的 active 类
document.querySelectorAll('.slider-indicator li').forEach(li => {
li.classList.remove('active');
});
// 再给当前的小圆点添加 active 类
const li = document.querySelector(`.slider-indicator li:nth-child(${i + 1})`);
if (li) {
li.classList.add('active');
}
}
</script>
</body>
</html>
