HTML5 – 事件

HTML5 为 Web 应用程序提供了更多的事件类型及更强大的事件处理机制。这些事件可以轻松地添加到 HTML 元素中，用于监听用户操作，提供响应交互式界面的能力。

常见的 HTML5 事件类型有以下几种：

Click – 鼠标点击事件
Keydown – 键盘按下事件
Mouseover – 鼠标悬停事件
Load – 页面加载事件
Submit – 表单提交事件
Change – 表单元素值变化事件
Focus – 元素聚焦事件
Blur – 元素失焦事件
Resume – 应用从后台恢复事件
Offline/Online – 离线/在线切换事件

事件处理程序

事件处理程序是指在 HTML 元素上注册相应事件的 JavaScript 函数，也称为事件监听器。以下是注册事件处理程序的两种基本方式：

HTML 属性

<button onclick="alert('Hello World!')">Click Me</button>

在 HTML 元素中通过 on + 事件名 来注册相应事件的处理程序。在此例中，点击该按钮时，将弹出一个对话框窗口，显示“Hello World!”。

DOM 元素属性

var btn = document.getElementById("myButton");
btn.addEventListener("click", function() {
  alert("Hello World!");
});

使用 JavaScript 获取元素，并调用 addEventListener 注册事件处理程序。在此例中，点击该按钮时，将同样弹出一个对话框窗口，显示“Hello World!”。

我们强烈建议采用第二种方式，因为它将 HTML 和 JavaScript 代码正确分离，避免了 HTML 中过多的 JavaScript 代码，使得代码可维护性更高。

事件对象

当一个事件被触发时，会自动创建一个事件对象。事件对象包含着与事件相关的信息，可以通过事件监听器（即事件处理程序）的参数进行访问。

以下是一些常见的事件对象属性：

event.target – 返回事件源对象
event.type – 返回触发事件的事件类型
event.timeStamp – 返回事件发生的时间戳
event.preventDefault() – 阻止事件默认行为
event.stopPropagation() – 阻止事件冒泡

以下是一个完整的事件处理程序示例：

var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
  console.log(`Target:  ${event.target}`); console.log(`Type:$ {event.type}`);
  console.log(`TimeStamp: ${event.timeStamp}`);
  event.preventDefault();
  event.stopPropagation();
});

在此例中，当点击按钮时，事件处理程序将输出 Target: [object HTMLButtonElement]、Type: click 和一个时间戳。此外，我们还调用了 preventDefault 和 stopPropagation 方法分别阻止了事件的默认行为和事件的冒泡。