用EventTarget和DOM掌握JavaScript事件模型

2024-02-13 20:03:39

EventTarget 接口
EventTarget 是 JavaScript 中的一个接口，它为对象提供处理事件的能力。EventTarget 的实例可以是 DOM 元素、XML 元素或自定义对象。EventTarget 提供了一组方法来处理事件，例如 addEventListener()、removeEventListener() 和 dispatchEvent() 等。

DOM 的事件操作
DOM 提供了丰富的事件操作，允许你监听和触发事件。可以使用 addEventListener() 方法为元素添加事件监听器，当事件发生时，相应的事件处理程序就会被触发。可以使用 removeEventListener() 方法删除事件监听器。此外，可以使用 dispatchEvent() 方法手动触发事件。

事件模型
事件模型了事件如何从触发源传播到事件处理程序。浏览器使用两种事件流：事件冒泡和事件捕获。事件冒泡是事件从触发源沿着DOM树向上传播的过程，而事件捕获是事件从DOM树的根节点向下传播的过程。可以通过使用 useCapture 参数来指定事件是否在冒泡阶段还是捕获阶段被处理。

灵活运用JavaScript事件模型，打造更丰富的网页交互

JavaScript事件模型为网页提供了交互性。通过监听和触发事件，你可以让网页对用户的操作做出反应。

实例1：响应按钮点击事件

const button = document.getElementById('button');
button.addEventListener('click', () => {
  alert('Button clicked!');
});

这段代码使用 addEventListener() 方法为按钮元素添加了 click 事件监听器。当按钮被点击时，事件处理程序就会被触发，并显示一个警报框。

实例2：使用键盘事件控制游戏角色

const character = document.getElementById('character');
document.addEventListener('keydown', (event) => {
  switch (event.key) {
    case 'ArrowUp':
      character.style.top = `${parseInt(character.style.top) - 10}px`;
      break;
    case 'ArrowDown':
      character.style.top = `${parseInt(character.style.top) + 10}px`;
      break;
    case 'ArrowLeft':
      character.style.left = `${parseInt(character.style.left) - 10}px`;
      break;
    case 'ArrowRight':
      character.style.left = `${parseInt(character.style.left) + 10}px`;
      break;
  }
});

这段代码使用 addEventListener() 方法为文档对象添加了 keydown 事件监听器。当键盘上的箭头键被按下时，事件处理程序就会被触发，并根据按下的键移动游戏角色。

实例3：使用鼠标事件实现拖放功能

const draggable = document.getElementById('draggable');
let isDragging = false;
let initialX;
let initialY;

draggable.addEventListener('mousedown', (event) => {
  isDragging = true;
  initialX = event.clientX - draggable.offsetLeft;
  initialY = event.clientY - draggable.offsetTop;
});

document.addEventListener('mousemove', (event) => {
  if (isDragging) {
    draggable.style.left = `${event.clientX - initialX}px`;
    draggable.style.top = `${event.clientY - initialY}px`;
  }
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

这段代码使用 addEventListener() 方法为可拖动元素添加了 mousedown、mousemove 和 mouseup 事件监听器。当鼠标在可拖动元素上按下时，isDragging 被设置为 true，并记录初始位置。当鼠标移动时，可拖动元素的位置会根据鼠标的位置进行更新。当鼠标松开时，isDragging 被设置为 false，拖放操作结束。