事件处理机制

事件处理机制

JavaScript中的事件处理机制是浏览器与用户交互的核心。当用户在页面上执行点击、滚动、输入等操作时，浏览器会生成对应的事件对象，并通过事件流机制传播这些事件。开发者可以通过监听这些事件来执行特定的代码逻辑。

事件流

事件流描述了事件从触发到处理的完整路径，包含三个阶段：

1. 捕获阶段：从window对象向下传播到目标元素
2. 目标阶段：事件到达目标元素
3. 冒泡阶段：从目标元素向上冒泡到window对象

document.getElementById('parent').addEventListener('click', function() {
  console.log('父元素捕获阶段');
}, true); // 第三个参数为true表示捕获阶段

document.getElementById('child').addEventListener('click', function() {
  console.log('子元素目标阶段');
});

document.getElementById('parent').addEventListener('click', function() {
  console.log('父元素冒泡阶段');
}); // 默认冒泡阶段

事件监听

添加事件监听有三种主要方式：

1. HTML属性

<button onclick="handleClick()">点击</button>

2. DOM属性

document.getElementById('myBtn').onclick = function() {
  console.log('按钮被点击');
};

3. addEventListener

element.addEventListener('click', function(event) {
  console.log('事件类型:', event.type);
  console.log('目标元素:', event.target);
});

事件对象

事件处理函数接收的事件对象包含丰富的信息：

document.addEventListener('click', function(e) {
  console.log('客户端坐标:', e.clientX, e.clientY);
  console.log('页面坐标:', e.pageX, e.pageY);
  console.log('屏幕坐标:', e.screenX, e.screenY);
  console.log('触发元素:', e.target);
  console.log('当前元素:', e.currentTarget);
  console.log('事件阶段:', e.eventPhase);
});

事件委托

利用事件冒泡机制，可以在父元素上统一处理子元素的事件：

document.getElementById('list').addEventListener('click', function(e) {
  if(e.target.tagName === 'LI') {
    console.log('点击了列表项:', e.target.textContent);
  }
});

自定义事件

JavaScript允许创建和触发自定义事件：

// 创建事件
const event = new CustomEvent('build', { 
  detail: { time: new Date() },
  bubbles: true,
  cancelable: true
});

// 监听事件
document.addEventListener('build', function(e) {
  console.log('自定义事件触发:', e.detail.time);
});

// 触发事件
document.dispatchEvent(event);

事件取消

可以通过事件对象的方法阻止默认行为或停止传播：

document.querySelector('a').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认跳转行为
  e.stopPropagation(); // 阻止事件冒泡
  console.log('链接点击被拦截');
});

异步事件处理

事件处理可以与异步操作结合：

button.addEventListener('click', async function() {
  try {
    const data = await fetchData();
    updateUI(data);
  } catch (error) {
    showError(error);
  }
});

性能优化

高频事件需要特殊处理以避免性能问题：

// 节流
function throttle(fn, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = new Date().getTime();
    if(now - lastCall < delay) return;
    lastCall = now;
    return fn.apply(this, args);
  };
}

window.addEventListener('scroll', throttle(function() {
  console.log('滚动处理');
}, 200));

跨浏览器兼容

处理不同浏览器的事件差异：

function addEvent(element, event, handler) {
  if(element.addEventListener) {
    element.addEventListener(event, handler);
  } else if(element.attachEvent) {
    element.attachEvent('on' + event, handler);
  } else {
    element['on' + event] = handler;
  }
}

事件与内存管理

不当的事件绑定可能导致内存泄漏：

// 错误示例
function setup() {
  const element = document.getElementById('myElement');
  element.addEventListener('click', function() {
    console.log('点击');
  });
}

// 正确做法
function setup() {
  const element = document.getElementById('myElement');
  function handleClick() {
    console.log('点击');
  }
  element.addEventListener('click', handleClick);
  
  // 需要时移除
  return function cleanup() {
    element.removeEventListener('click', handleClick);
  };
}

触摸事件处理

移动端特有的触摸事件：

const touchArea = document.getElementById('touchArea');

touchArea.addEventListener('touchstart', function(e) {
  const touch = e.touches[0];
  console.log('触摸开始:', touch.clientX, touch.clientY);
});

touchArea.addEventListener('touchmove', function(e) {
  e.preventDefault(); // 阻止默认滚动行为
  const touch = e.touches[0];
  console.log('触摸移动:', touch.clientX, touch.clientY);
});

键盘事件

处理键盘输入：

document.addEventListener('keydown', function(e) {
  console.log('按键代码:', e.keyCode);
  console.log('按键:', e.key);
  
  // Ctrl + S 组合键
  if(e.ctrlKey && e.key === 's') {
    e.preventDefault();
    saveContent();
  }
});

表单事件

表单特有的交互事件：

const form = document.querySelector('form');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  validateForm();
});

form.addEventListener('input', function(e) {
  if(e.target.name === 'username') {
    validateUsername(e.target.value);
  }
});

拖放API

实现拖放功能：

const draggable = document.getElementById('draggable');
const dropzone = document.getElementById('dropzone');

draggable.addEventListener('dragstart', function(e) {
  e.dataTransfer.setData('text/plain', e.target.id);
});

dropzone.addEventListener('dragover', function(e) {
  e.preventDefault();
});

dropzone.addEventListener('drop', function(e) {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  e.target.appendChild(document.getElementById(id));
});

页面生命周期事件

与页面生命周期相关的事件：

window.addEventListener('DOMContentLoaded', function() {
  console.log('DOM已加载');
});

window.addEventListener('load', function() {
  console.log('所有资源已加载');
});

window.addEventListener('beforeunload', function(e) {
  e.preventDefault();
  e.returnValue = '确定离开吗？';
});

window.addEventListener('unload', function() {
  // 清理工作
});

动画帧事件

优化动画性能：

function animate() {
  // 动画逻辑
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

错误处理事件

全局错误捕获：

window.addEventListener('error', function(event) {
  console.error('全局错误:', event.message);
  return true; // 阻止默认错误处理
});

window.addEventListener('unhandledrejection', function(event) {
  console.error('未处理的Promise拒绝:', event.reason);
});

剪贴板事件

处理剪贴板操作：

document.addEventListener('copy', function(e) {
  e.clipboardData.setData('text/plain', '自定义复制内容');
  e.preventDefault();
});

document.addEventListener('paste', function(e) {
  const pastedText = e.clipboardData.getData('text');
  console.log('粘贴内容:', pastedText);
});

全屏事件

处理全屏状态变化：

document.addEventListener('fullscreenchange', function() {
  if(document.fullscreenElement) {
    console.log('进入全屏');
  } else {
    console.log('退出全屏');
  }
});

// 请求全屏
document.documentElement.requestFullscreen().catch(err => {
  console.error('全屏错误:', err);
});

网络状态事件

检测网络连接变化：

window.addEventListener('online', function() {
  console.log('网络已连接');
});

window.addEventListener('offline', function() {
  console.log('网络已断开');
});

组件通信

通过事件实现组件间通信：

// 组件A
const event = new CustomEvent('updateData', {
  detail: { newData: '...' }
});
document.dispatchEvent(event);

// 组件B
document.addEventListener('updateData', function(e) {
  console.log('收到新数据:', e.detail.newData);
});