JavaScript 事件学习笔记
JavaScript事件是指在网页中发生的各种交互行为，如鼠标点击、鼠标移动、键盘输入等。通过处理这些事件，可以使网页变得更加动态和有趣。本文将介绍JavaScript事件相关的知识点，并举出实例。
监听事件
要处理JavaScript事件，首先需要监听事件。可以使用addEventListener方法来监听事件，示例如下：
javascriptCopy Codeconst element = document.querySelector('#myButton');
element.addEventListener('click', function() {
alert('Button clicked');
});
以上代码会在页面加载完成后寻找id为myButton的元素，并在其被点击时弹出一个提示框。
除click之外，还有许多其他类型的事件，如mouseover、keydown等等。完整的事件列表可以参考MDN文档。
事件对象
在事件处理函数中，可以获取一个事件对象，它包含了所有关于事件的信息。例如，在click事件处理函数中，可以通过event.target属性获取被点击的元素。又如，在mousemove事件处理函数中，可以通过event.clientX和event.clientY属性获取鼠标坐标。
javascriptCopy Codeconst element = document.querySelector('#myDiv');
element.addEventListener('mousemove', function(event) {
console.log(`Mouse position: (${event.clientX}, ${event.clientY})`);
});
以上代码会在鼠标在myDiv元素上移动时，在控制台输出鼠标的坐标。
阻止事件默认行为
有时候，浏览器会对某些事件有默认的处理方式。例如，当用户点击一个链接时，浏览器会跳转到链接的页面。如果我们不希望出现这种情况，可以通过阻止事件默认行为来实现。示例代码如下：
javascriptCopy Codeconst link = document.querySelector('#myLink');
link.addEventListener('click', function(event) {
event.preventDefault();
});
以上代码会在用户点击一个id为myLink的链接时，阻止浏览器跳转到链接的页面。
实例
下面是一个用JavaScript实现的图片轮播器。它会每3秒钟切换一张图片，用户可以点击箭头图标来手动切换图片。
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image Slider</title>
<style>
.sliderContainer {
position: relative;
width: 600px;
height: 400px;
}
.sliderImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
color: white;
cursor: pointer;
}
.arrowLeft {
left: 10px;
}
.arrowRight {
right: 10px;
}
</style>
</head>
<body>
<div class="sliderContainer">
<img class="sliderImage" src="https://picsum.photos/id/237/600/400">
<img class="sliderImage" src="https://picsum.photos/id/238/600/400">
<img class="sliderImage" src="https://picsum.photos/id/239/600/400">
<img class="sliderImage" src="https://picsum.photos/id/240/600/400">
<div class="arrow arrowLeft">❮</div>
<div class="arrow arrowRight">❯</div>
</div>
<script>
const images = document.querySelectorAll('.sliderImage');
const leftArrow = document.querySelector('.arrowLeft');
const rightArrow = document.querySelector('.arrowRight');
let currentIndex = 0;
function showImage(index) {
images.forEach(image => image.style.display = 'none');
images[index].style.display = 'block';
}
function nextImage() {
currentIndex = (currentIndex + 1) % images.length;
showImage(currentIndex);
}
function previousImage() {
currentIndex = (currentIndex + images.length - 1) % images.length;
showImage(currentIndex);
}
setInterval(nextImage, 3000);
leftArrow.addEventListener('click', function(event) {
previousImage();
});
rightArrow.addEventListener('click', function(event) {
nextImage();
});
</script>
</body>
</html>
以上代码会在页面上显示一个图片轮播器，用户可以手动切换图片，也可以让轮播器自动切换图片。