JavaScript 异步编程之事件

前端

2023-09-08 10:34:36

在 JavaScript 中，事件是用户与网页交互时触发的动作。事件处理是 JavaScript 异步编程的重要组成部分，可以帮助我们构建响应式、交互式网页。

事件类型

JavaScript 中的事件有很多种，最常见的包括：

鼠标事件：如点击、双击、鼠标移入、鼠标移出等。
键盘事件：如按键按下、按键弹起、按键保持等。
表单事件：如提交、重置、文本输入、选择框改变等。
窗口事件：如窗口加载、窗口调整大小、窗口滚动等。
文档事件：如文档加载、文档就绪等。

事件流

事件流是指事件从触发源传播到目标元素的过程。在 JavaScript 中，事件流有三个阶段：

捕获阶段：事件从触发源向上传播，经过每个祖先元素。
目标阶段：事件到达目标元素。
冒泡阶段：事件从目标元素向下传播，经过每个子孙元素。

默认情况下，事件会在捕获阶段和冒泡阶段都触发。我们可以使用 event.stopPropagation() 方法阻止事件在当前元素继续传播。

事件代理

事件代理是一种将事件监听器附加到父元素而不是子元素的技术。这样，当子元素触发事件时，父元素也会触发相同的事件。事件代理可以提高性能，因为它减少了事件监听器的数量。

实用示例

鼠标点击事件

// 获取按钮元素
const button = document.getElementById('button');

// 为按钮元素添加点击事件监听器
button.addEventListener('click', function() {
  alert('按钮被点击了！');
});

表单提交事件

// 获取表单元素
const form = document.getElementById('form');

// 为表单元素添加提交事件监听器
form.addEventListener('submit', function(event) {
  // 阻止表单默认提交行为
  event.preventDefault();

  // 获取表单数据
  const formData = new FormData(form);

  // 发送表单数据到服务器
  fetch('/submit-form', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    // 处理服务器返回的数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });
});

窗口滚动事件

// 添加窗口滚动事件监听器
window.addEventListener('scroll', function() {
  // 获取滚动条的位置
  const scrollTop = window.pageYOffset;

  // 滚动条到达顶部时，隐藏导航栏
  if (scrollTop === 0) {
    document.getElementById('navbar').classList.add('hidden');
  }
  // 滚动条离开顶部时，显示导航栏
  else {
    document.getElementById('navbar').classList.remove('hidden');
  }
});