前端学习-事件监听以及案例（二十四）
目录
文章目录
前言
事件监听
目标
什么是事件？
语法：
事件监听三要素
示例代码
注意
案例一：广告的关闭
案例二：随机点名
案例三：轮播图
事件监听版本
DOM L0
DOM L2
区别
事件类型
鼠标事件
鼠标触发
焦点事件
表单获得光标
键盘事件
键盘触发
文本事件
表单输入触发
总结
前言
晚上好各位，今天是长文，讲述了事件监听的基本原理并附带三个案例，各位酌情学习
事件监听
目标
能够给DOM元素添加事件监听
什么是事件？
事件是在编程时系统内发生的动作或者发生的事情比如用户在网页上单击一个按钮
什么是事件监听?就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 绑定事件或者注册事件比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等
语法：
元素对象.addEventListener('事件类型',要执行的函数)
事件监听三要素
事件源: 那个dom元素被事件触发了，要获取dom元素
事件类型:用什么方式触发，比如鼠标单击click、鼠标经过 mouseover等
事件调用的函数:要做什么事
示例代码
<button id="myButton">按钮</button>
<script> // 使用ID选择器来选取按钮元素 const btn = document.querySelector('#myButton');
// 为按钮添加点击事件监听器 btn.addEventListener('click', function() { // 当按钮被点击时，弹出警告框 alert('点击了~'); // 修改按钮样式（例如改变背景颜色） btn.style.backgroundColor = 'lightblue'; });</script>注意
事件类型要加引号
函数是点击之后再去执行，每次点击都会执行一次
案例一：广告的关闭
详细代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Listeners</title>
<style>
.ad-container {
width: 50%;
height: 50%;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
background-color: yellow;
padding: 20px;
border: 1px solid black;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
position: relative;
/* 添加相对定位 */
}
.close-button {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
font-size: 20px;
background-color: red;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<button id="btn">Click Me</button>
<div class="ad-container">
<div class="close-button">X</div>
这是广告
</div>
<script>
const bin = document.querySelector('#btn');
bin.addEventListener('click', function () {
alert('You Clicked Me!');
bin.style.backgroundColor = 'green';
let one = prompt('What is your name?');
console.log(one);
});
// 添加关闭广告的事件监听器
const closeButton = document.querySelector('.close-button');
closeButton.addEventListener('click', function () {
const adContainer = document.querySelector('.ad-container');
adContainer.style.display = 'none'; // 隐藏广告块
});
</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>Event Listeners</title>
<style>
.question-container {
margin-top: 20px;
text-align: center;
}
.button-container {
text-align: center;
margin-top: 20px;
}
.button-container button {
margin: 0 30px;
width: 100px;
height: 40px;
border: 1px solid #ccc;
font-size: 14px;
padding: 0;
}
</style>
</head>
<body>
<div class="question-container">
<h2>随机问答</h2>
<p id="random-question"></p>
</div>
<div class="button-container">
<button id="start-btn">开始</button>
<button id="end-btn">结束</button>
</div>
<script>
// 定义问题数组
const questions = [
"开始和结束之间的关系是什么？",
"如何在JavaScript中生成随机数？",
"CSS中的position属性有哪些值？",
"HTML中的<meta>标签有什么作用？",
"JavaScript中的闭包是什么？"
];
let currentQuestion = null;
let intervalId = null;
function getRandomQuestion() {
if (questions.length === 0) {
alert('没有问题可以抽取了！');
return null;
}
const randomIndex = Math.floor(Math.random() * questions.length);
currentQuestion = questions[randomIndex];
return currentQuestion;
}
function displayQuestion() {
const randomQuestionElement = document.getElementById('random-question');
randomQuestionElement.textContent = getRandomQuestion();
}
document.getElementById('start-btn').addEventListener('click', function () {
if (questions.length === 1) {
alert('只剩最后一个数据不用抽了！');
document.getElementById('start-btn').disabled = true;
document.getElementById('end-btn').disabled = true;
displayQuestion();
return;
}
if (intervalId) {
clearInterval(intervalId);
}
intervalId = setInterval(displayQuestion, 100); // 每秒展示一个新问题
});
// 结束按钮点击事件
document.getElementById('end-btn').addEventListener('click', function () {
if (currentQuestion) {
const index = questions.indexOf(currentQuestion);
if (index !== -1) {
questions.splice(index, 1);
}
currentQuestion = null;
clearInterval(intervalId);
intervalId = null;
displayQuestion();
}
if (questions.length === 1) {
alert('只剩最后一个数据不用抽了！');
document.getElementById('start-btn').disabled = true;
document.getElementById('end-btn').disabled = true;
}
});
// 初始化显示
displayQuestion();
</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>轮播图点击切换</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
margin: 0;
}
.slider {
width: 500px;
height: 500px;
overflow: hidden;
position: relative;
}
.slider-wrapper {
width: 100%;
height: 100%;
}
.slider-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.slider-footer {
position: absolute;
bottom: 0;
width: 100%;
height: 80px;
background-color: rgba(0, 255, 255, 0.5);
padding: 12px 12px 0 12px;
box-sizing: border-box;
}
.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;
justify-content: center;
width: 100%;
position: absolute;
bottom: 12px;
}
.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="./image/1.jpg" alt="Image 1">
</div>
<div class="slider-footer">
<p>下午好啊卷芯小狗</p>
<ul class="slider-indicator">
<li class="active"></li>
<li></li>
<li></li>
<li></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: './image/1.jpg',
title: ''
},
{
url: './image/2.jpg',
title: ''
},
{
url: './image/3.jpg',
title: ''
},
{
url: './image/4.jpg',
title: '菜'
},
{
url: './image/5.jpg',
title: '狗'
}
];
let currentIndex = 0;
let autoPlayInterval;
function showSlide(index) {
const img = document.querySelector('.slider-wrapper img');
img.src = sliderData[index].url;
document.querySelectorAll('.slider-indicator li').forEach((li, i) => {
li.classList.toggle('active', i === index);
});
}
function nextSlide() {
currentIndex = (currentIndex + 1) % sliderData.length;
showSlide(currentIndex);
}
function prevSlide() {
currentIndex = (currentIndex - 1 + sliderData.length) % sliderData.length;
showSlide(currentIndex);
}
// 添加指示器项的点击事件监听器
document.querySelectorAll('.slider-indicator li').forEach((li, index) => {
li.addEventListener('click', () => {
currentIndex = index;
showSlide(currentIndex);
});
});
document.querySelector('.next').addEventListener('click', nextSlide);
document.querySelector('.prev').addEventListener('click', prevSlide);
// 自动播放
function startAutoPlay() {
autoPlayInterval = setInterval(nextSlide, 1000);
}
function stopAtuoPlay() {
clearInterval(autoPlayInterval);
}
const sliderElement = document.querySelector('.slider');
sliderElement.addEventListener('mouseenter', stopAtuoPlay);
sliderElement.addEventListener('mouseleave', startAutoPlay);
</script>
</body>
</html>事件监听版本
DOM L0
事件源.on事件=function(){}
DOM L2
事件源.addEventListener(事件，事件处理函数)
区别
on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用
因为DOM L0相当于赋值，后面的覆盖前面的
事件类型
鼠标事件
鼠标触发
-
click-鼠标点击
-
mouseenter-鼠标经过
-
mouseleave-鼠标离开
焦点事件
表单获得光标
-
focus-获得焦点
-
blur-失去焦点
键盘事件
键盘触发
-
Keydown-键盘按下触发
-
Keyup-键盘抬起触发
文本事件
表单输入触发
1.input-用户输入事件
总结
各位晚安