介绍js各种事件

目录

一、点击事件

二、鼠标移动事件

三、键盘事件

四、滚轮事件

五、拖放事件

六、窗口大小改变事件

---

一、点击事件

点击事件是指当用户单击页面上的某个元素时触发的事件。这是最常见和基础的事件之一，也是Web应用程序中最常用的交互之一。

以下是如何使用JavaScript捕获和处理点击事件：

// 获取元素
const button = document.getElementById('myButton');// 添加点击事件监听器
button.addEventListener('click', function(event) {// 处理逻辑console.log('按钮被点击了');
});

在这个例子中，我们获取了ID为“myButton”的按钮元素，并使用addEventListener()方法添加了一个点击事件监听器。当按钮被单击时，控制台将打印“按钮被点击了”。

二、鼠标移动事件

鼠标移动事件是指当用户将鼠标移动到页面上的某个元素上时触发的事件。这种类型的事件可用于跟踪用户对网站上不同元素的兴趣。

以下是如何使用JavaScript捕获和处理鼠标移动事件：

// 获取元素
const element = document.getElementById('myElement');// 添加鼠标移动事件监听器
element.addEventListener('mousemove', function(event) {// 处理逻辑console.log(`鼠标在元素上的位置：(${event.clientX}, ${event.clientY})`);
});

在这个例子中，我们获取了ID为“myElement”的元素，并使用addEventListener()方法添加了一个鼠标移动事件监听器。当鼠标移动到该元素上时，控制台将打印出当前鼠标的位置。

三、键盘事件

键盘事件是指当用户按下或释放键盘上的某个键时触发的事件。这种类型的事件可用于跟踪用户输入和对网站上不同元素的操作。

以下是如何使用JavaScript捕获和处理键盘事件：

// 获取元素
const input = document.getElementById('myInput');// 添加键盘事件监听器
input.addEventListener('keydown', function(event) {// 处理逻辑console.log(`按下了键：${event.key}`);
});input.addEventListener('keyup', function(event) {// 处理逻辑console.log(`释放了键：${event.key}`);
});

在这个例子中，我们获取了ID为“myInput”的文本输入框元素，并使用addEventListener()方法添加了两个键盘事件监听器。当用户按下或释放某个键时，将在控制台打印出相应的信息。

四、滚轮事件

滚轮事件是指当用户使用鼠标滚轮向上或向下滚动网页时触发的事件。这种类型的事件可用于跟踪用户浏览行为和对网站上不同元素的兴趣。

以下是如何使用JavaScript捕获和处理滚轮事件：

// 获取元素
const element = document.getElementById('myElement');// 添加滚轮事件监听器
element.addEventListener('wheel', function(event) {// 处理逻辑console.log(`滚轮滚动了${event.deltaY}像素`);
});

在这个例子中，我们获取了ID为“myElement”的元素，并使用addEventListener()方法添加了一个滚轮事件监听器。当用户使用鼠标滚轮向上或向下滚动网页时，控制台将打印出相应的信息。

五、拖放事件

拖放事件是指当用户拖动页面上的某个元素时触发的一系列事件。这种类型的事件可用于交互式图形界面（GUI）和其他Web应用程序。

以下是如何使用JavaScript捕获和处理拖放事件：

// 获取元素
const draggable = document.getElementById('myDraggable');
const droppable = document.getElementById('myDroppable');// 添加拖放事件监听器
draggable.addEventListener('dragstart', function(event) {event.dataTransfer.setData('text/plain', event.target.id);
});droppable.addEventListener('drop', function(event) {const data = event.dataTransfer.getData('text/plain');const draggableElement = document.getElementById(data);droppable.appendChild(draggableElement);
});droppable.addEventListener('dragover', function(event) {event.preventDefault();
});

在这个例子中，我们获取了两个元素：一个可以拖动的元素和一个可放置的元素。通过使用addEventListener()方法添加三个事件监听器来处理拖放事件。当用户在可拖动的元素上启动拖动操作时，将在数据传输对象中设置该元素的ID。当用户将该元素拖到可放置的元素上并释放鼠标按钮时，将移动该元素到可放置的元素中。

六、窗口大小改变事件

窗口大小改变事件是指当用户调整浏览器窗口大小时触发的事件。这种类型的事件可用于自适应布局和响应式Web设计。

以下是如何使用JavaScript捕获和处理窗口大小改变事件：

```javascript // 添加窗口大小改变事件监听器 window.addEventListener('resize', function(event) { // 处理逻辑 console.log(`窗口大小：(${window.innerWidth},