js 监听实现
事件监听基础方法
使用 addEventListener 是标准的事件监听方式，支持多个监听器且可精确控制事件流阶段。语法如下：
element.addEventListener(eventType, callback, options);eventType 为字符串（如 "click"），callback 是事件触发时执行的函数。options 可指定 capture（捕获阶段触发）或 passive（不阻止滚动优化性能）。
移除事件监听
通过 removeEventListener 移除监听时需确保参数与添加时完全一致：
const handler = () => console.log('Clicked');
element.addEventListener('click', handler);
element.removeEventListener('click', handler); // 成功移除事件委托优化
利用事件冒泡机制在父元素监听子元素事件，适合动态内容或大量子元素：
document.getElementById('parent').addEventListener('click', (event) => {
if (event.target.matches('.child')) {
console.log('Child element clicked');
}
});自定义事件触发
创建并派发自定义事件实现组件间通信：
const event = new CustomEvent('customEvent', { detail: { data: 'example' } });
element.dispatchEvent(event);
element.addEventListener('customEvent', (e) => {
console.log(e.detail.data); // 输出: example
});性能注意事项
频繁触发的事件（如 scroll、resize）应使用防抖或节流：
function debounce(fn, delay) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
}
window.addEventListener('resize', debounce(() => {
console.log('Resize handler');
}, 200));被动事件监听
标记 { passive: true } 提升滚动性能，但此时无法调用 preventDefault()：
window.addEventListener('touchstart', handler, { passive: true });
