9 个JavaScript常用事件

admin

1. 鼠标事件

鼠标事件是网页上用户交互的基础。以下是一些最常用的鼠标事件：

点击

当在元素上按下并释放鼠标按钮时，会触发点击事件。

复制代码
document.getElementById("myButton").addEventListener("click", function() {
   alert("Button clicked!");
});

双击

双击元素时会触发 dblclick​ 事件。

复制代码
document.getElementById("myButton").addEventListener("dblclick", function() {
   alert("Button double-clicked!");
});

Mousedown 和 Mouseup

当鼠标按钮在元素上被按下 (mousedown​) 和释放 (mouseup​) 时，会触发这些事件。

复制代码
document.getElementById("myButton").addEventListener("mousedown", function() {
   console.log("Mouse button pressed!");
});

document.getElementById("myButton").addEventListener("mouseup", function() {
   console.log("Mouse button released!");
});

Mouseover 和 Mouseout

当鼠标指针进入（mouseover​）或离开（mouseout​）元素时，这些事件会触发。

复制代码
document.getElementById("myButton").addEventListener("mouseover", function() {
   this.style.backgroundColor = "yellow";
});

document.getElementById("myButton").addEventListener("mouseout", function() {
   this.style.backgroundColor = "";
});

2. 键盘事件

键盘事件对于通过键盘捕获用户输入至关重要。

Keydown 和 Keyup

当按下（keydown​）或释放（keyup​）键时，会触发这些事件。

复制代码
document.addEventListener("keydown", function(event) {
   console.log(`Key pressed: ${event.key}`);
});

document.addEventListener("keyup", function(event) {
   console.log(`Key released: ${event.key}`);
});

3. 触摸事件

触摸事件对于移动设备和触摸屏设备至关重要。

Touchstart、Touchmove 和 Touchend

这些事件捕获触摸交互的开始、移动和结束。

复制代码
document.getElementById("touchArea").addEventListener("touchstart", function() {
   console.log("Touch started.");
});

document.getElementById("touchArea").addEventListener("touchmove", function() {
   console.log("Touch moving.");
});

document.getElementById("touchArea").addEventListener("touchend", function() {
   console.log("Touch ended.");
});

4. 表单事件

表单事件对于处理用户输入和表单提交至关重要。

提交

提交表单时会触发提交事件。

复制代码
document.getElementById("myForm").addEventListener("submit", function(event) {
   event.preventDefault();  // Prevent default form submission
   alert("Form submitted!");
});

更改和输入

当表单元素的值发生更改时，会触发更改事件，而当输入字段的值发生更改时，会立即触发输入事件。

复制代码
document.getElementById("myInput").addEventListener("change", function() {
    console.log("Input value changed.");
});

document.getElementById("myInput").addEventListener("input", function() {
    console.log(`Current input value: ${this.value}`);
});

5. 文档/窗口事件

这些事件与整个文档或浏览器窗口相关。

加载

当页面及其所有资源加载完成后，将触发加载事件。

复制代码
window.addEventListener("load", function() {
    console.log("Page loaded and all resources are ready.");
});

滚动和调整大小

当页面滚动或窗口调整大小时会触发这些事件。

复制代码
window.addEventListener("scroll", function() {
    console.log("Page is scrolling.");
});

window.addEventListener("resize", function() {
    console.log("Window resized.");
});

Beforeunload

当用户试图离开页面时，会触发此事件。

复制代码
window.addEventListener("beforeunload", function(event) {
    event.preventDefault();  // Cancel the event
    event.returnValue = "Are you sure you want to leave?";
});

6. 焦点事件

焦点事件对于管理用户对表单元素的注意力非常重要。

焦点和模糊

当元素获得（focus​）或失去（blur​）焦点时，会触发这些事件。

复制代码
document.getElementById("myInput").addEventListener("focus", function() {
    console.log("Input field focused.");
});

document.getElementById("myInput").addEventListener("blur", function() {
    console.log("Input field lost focus.");
});

7. 拖放事件

拖放事件可实现交互式用户体验。

Dragstart、Dragover 和 Drop

这些事件处理拖动的开始、拖过放置区域以及放置元素。

复制代码
document.getElementById("dragItem").addEventListener("dragstart", function(event) {
    console.log("Drag started.");
    event.dataTransfer.setData("text", event.target.id);
});

document.getElementById("dropZone").addEventListener("dragover", function(event) {
    event.preventDefault();  // Allow drop
    console.log("Drag over drop zone.");
});

document.getElementById("dropZone").addEventListener("drop", function(event) {
    event.preventDefault();  // Prevent default action
    const data = event.dataTransfer.getData("text");
    console.log("Dropped element ID: " + data);
});

8. 动画事件

动画事件对于控制 CSS 动画非常有用。

Animationstart 和 Animationend

这些事件在 CSS 动画开始和结束时触发。

复制代码
document.getElementById("animatedElement").addEventListener("animationstart", function() {
    console.log("Animation started!");
});

document.getElementById("animatedElement").addEventListener("animationend", function() {
    console.log("Animation ended!");
});

9. 过渡事件

过渡事件有助于管理 CSS 过渡。

Transitionend

当 CSS 过渡完成时，会触发此事件。

复制代码
document.getElementById("transitionElement").addEventListener("transitionend", function() {
    console.log("Transition ended.");
});