Mouse Events

一，click

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

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

二，Double-click

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

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

三，Mousedown and 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 and Mouseout

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

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

Keyboard Events

当按下键 ( keydown ) 或释放键 ( keyup ) 时会触发这些事件。

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

Touch Events

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

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.");
});

Form Events

一，submit

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

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault();
  alert("Form submitted!");
});

二，Change and Input

当表单元素的值发生变化时，会触发change事件，而当输入字段的值发生变化时，会立即触发input事件。

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

Document / Window Events

一，load

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

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

二，scroll / resize

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

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?";
});

Focus Events

当元素获得（ 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.");
});

Drag and Drop Events

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

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);
});

Animation Events

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

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

Transition Events

当 CSS 转换完成时会触发此事件。

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