镇江发展_中国化工建设公司官网_上海品牌推广公司_国内电商平台有哪些

文章目录

前言

事件监听

目标

什么是事件？

语法：

事件监听三要素

示例代码

注意

案例一：广告的关闭

案例二：随机点名

案例三：轮播图

事件监听版本

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">&lt;</button><button class="next">&gt;</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>