HTML5 - 事件

HTML5 - 事件

事件是指在浏览器中发生的行为或发生的事情，通常由用户交互（例如点击按钮、移动鼠标、按下按键）或浏览器自身（例如页面加载完成、视频开始播放或发生错误）触发。

JavaScript 允许您检测这些事件并执行相应的代码，从而使网页具有交互性和动态性。这些代码通常被称为“事件处理程序”（event handler）或“事件监听器”（event listener）。

HTML5 支持适用于各种元素和浏览器状态的广泛事件。

分配事件处理程序

有几种方法可以分配事件处理程序：

1. 内联事件处理程序属性（不推荐）： 直接在 HTML 元素上添加 onclick、onmouseover 等属性。这种方法将 HTML 和 JavaScript 逻辑混在一起，通常不建议用于大型应用程序。
2. DOM 元素属性： 在 JavaScript 中将一个函数赋值给元素的相应 on<事件类型> 属性（例如，buttonElement.onclick = myFunction;）。这种方式每个事件类型只能分配一个处理程序。
3. addEventListener()（推荐）： 这是现代且最灵活的方法。它允许为同一个事件类型的元素附加多个独立的监听器，并提供了对事件捕获（capturing）/冒泡（bubbling）阶段的更多控制。

使用 addEventListener() 的示例

<!DOCTYPE html>
<html>
<head>
  <title>Event Listener Example</title>
</head>
<body>
  <button id="myButton">Click Me</button>
  <p id="output"></p>

  <script>
    const button = document.getElementById('myButton');
    const output = document.getElementById('output');

    function handleClick(event) {
      // 'event' 对象包含有关事件的信息
      console.log('Button clicked!', event);
      output.textContent = `Button clicked at ${new Date().toLocaleTimeString()}`;
    }

    function handleMouseOver() {
        console.log('Mouse is over the button');
        button.style.backgroundColor = 'lightblue';
    }

    function handleMouseOut() {
        console.log('Mouse left the button');
        button.style.backgroundColor = ''; // 重置样式
    }

    // 附加事件监听器
    button.addEventListener('click', handleClick);
    button.addEventListener('mouseover', handleMouseOver);
    button.addEventListener('mouseout', handleMouseOut);

    // 要稍后移除监听器：
    // button.removeEventListener('click', handleClick);
  </script>
</body>
</html>

常见事件类别及示例

HTML5 事件可以大致分为以下几类：

鼠标事件

• click: 当鼠标主按钮在元素上被点击时触发。
• dblclick: 当鼠标主按钮被双击时触发。
• mousedown: 当鼠标按钮在元素上被按下时触发。
• mouseup: 当鼠标按钮在元素上被释放时触发。
• mousemove: 当鼠标指针在元素上移动时重复触发。
• mouseover: 当鼠标指针进入元素或其子元素时触发。
• mouseout: 当鼠标指针离开元素或其子元素时触发。
• mouseenter: 类似于 mouseover，但不冒泡，且在元素与其后代元素之间移动时不会触发。
• mouseleave: 类似于 mouseout，但不冒泡。
• contextmenu: 当鼠标右键被点击时（或通过其他方式触发上下文菜单时）触发。

键盘事件

• keydown: 当按键被按下时触发。
• keyup: 当按键被释放时触发。
• keypress: 当按下产生字符值的按键时触发（对于更通用的按键检测，请使用 keydown）。

表单事件

• submit: 当 <form> 元素被提交时触发。
• reset: 当 <form> 元素被重置时触发。
• change: 当 <input>、<select> 和 <textarea> 元素的值改变且它们失去焦点时触发。
• input: 当 <input>、<select> 和 <textarea> 元素的值立即改变时触发。
• focus: 当元素获得焦点时触发。
• blur: 当元素失去焦点时触发。
• invalid: 当表单控件未能通过约束验证时触发。

文档/窗口事件

• load: 当整个页面（包括图像和样式表等资源）加载完成时在 window 上触发。
• DOMContentLoaded: 当初始 HTML 文档被完全加载和解析完成时在 document 上触发，无需等待样式表、图像和子框架加载完成。通常比 load 更适合用于初始化与 DOM 交互的脚本。
• unload: 当页面正在被卸载时在 window 上触发。
• beforeunload: 在页面即将被卸载之前在 window 上触发。可用于在用户离开页面前给出提示。
• resize: 当浏览器窗口大小改变时在 window 上触发。
• scroll: 当 window 或任何可滚动元素被滚动时触发。

媒体事件（适用于 <audio>、<video>）

• play: 当媒体播放开始或恢复时触发。
• pause: 当媒体播放暂停时触发。
• ended: 当媒体播放到达末尾时触发。
• timeupdate: 随着当前播放位置改变而频繁触发。
• volumechange: 当音量或静音状态改变时触发。
• canplay: 当浏览器可以开始播放但可能需要缓冲时触发。
• canplaythrough: 当浏览器估计可以流畅播放到末尾而无需缓冲时触发。
• error: 如果在获取或播放媒体时发生错误则触发。
• loadeddata: 当媒体的第一帧已加载时触发。
• progress: 当浏览器下载媒体数据时周期性触发。

拖放事件

• dragstart: 当开始拖动时，在可拖动元素上触发。
• drag: 在拖动过程中，在可拖动元素上重复触发。
• dragend: 当拖动结束时，在可拖动元素上触发。
• dragenter: 当被拖动的项目进入潜在的放置目标时，在该目标上触发。
• dragover: 当被拖动的项目在潜在的放置目标上移动时重复触发（必须在此调用 event.preventDefault() 以允许放置）。
• dragleave: 当被拖动的项目离开潜在的放置目标时，在该目标上触发。
• drop: 当项目被放置到放置目标上时，在该目标上触发。

其他事件

• online: 当浏览器获得网络连接时触发。
• offline: 当浏览器失去网络连接时触发。
• popstate: 当活动历史记录条目改变时（例如，点击前进/后退按钮），在 window 上触发。
• storage: 当同源的另一个文档修改了 Web Storage 区域（localStorage 或 sessionStorage）时，在 window 上触发。
• 过渡/动画事件（transitionend、animationend）。
• 指针事件（鼠标/触摸事件的现代替代方案：pointerdown、pointermove、pointerup 等）。

这不是一个详尽的列表。许多 API（如 WebSockets、Server-Sent Events、Web Workers、IndexedDB）都有自己特定的事件。有关每个事件的完整列表和详细信息，请参阅 MDN Web Docs：（https://developer.mozilla.org/en-US/docs/Web/Events）