事件响应之 JavaScript 事件类型大全

在 JavaScript 中，事件响应是网页与用户交互的关键。事件是由用户操作触发的动作，例如点击、鼠标悬停、键盘输入等。通过利用事件，网页可以对用户的交互做出响应，从而提供动态且有吸引力的用户体验。

JavaScript 提供了丰富的事件类型，涵盖了各种用户交互，包括：

• 键盘事件： keydown、keypress、keyup
• 鼠标事件： click、dblclick、mousedown、mousemove、mouseout、mouseover、mouseup
• 表单事件： change、focus、blur、input、submit
• 窗口事件： load、unload、resize、scroll
• DOM 事件： DOMContentLoaded、DOMSubtreeModified、DOMNodeInserted、DOMNodeRemoved
• 自定义事件： 通过 CustomEvent 类创建

事件监听器和事件处理程序

为了响应事件，需要使用 addEventListener 方法将事件处理程序附加到特定元素。事件处理程序是一个函数，当指定的事件触发时会被调用。

element.addEventListener('event-type', eventHandler);

例如，要监听按钮的点击事件并弹出警报：

const button = document.querySelector('button');
button.addEventListener('click', () => {
  alert('按钮被点击了！');
});

阻止事件传播

默认情况下，事件会向上冒泡到文档中的父元素。可以使用 event.stopPropagation() 方法来阻止这种冒泡行为。

event.stopPropagation();

例如，要防止点击按钮时冒泡到父元素：

button.addEventListener('click', (event) => {
  // 阻止冒泡
  event.stopPropagation();

  // 执行其他操作...
});

事件对象

当事件触发时，会创建一个事件对象，其中包含有关事件的详细信息，例如：

• type：事件的类型
• target：触发事件的元素
• clientX、clientY：触发事件时鼠标的坐标（对于鼠标事件）

通过访问事件对象，可以获取有关触发事件的上下文信息。

结论

掌握 JavaScript 事件类型对于构建交互式和响应式的网页至关重要。通过了解各种事件类型、事件监听器和事件对象的用法，可以轻松创建对用户操作做出响应并增强用户体验的动态网页。