js监听实现
事件监听基础
在JavaScript中，事件监听通过addEventListener方法实现。该方法接收三个参数：事件类型、回调函数及可选的配置对象。基本语法如下：
element.addEventListener('eventType', callbackFunction, options);常见的事件类型包括click、mouseover、keydown等。回调函数会在事件触发时执行，接收一个事件对象作为参数。
事件委托模式
事件委托利用事件冒泡机制，将事件监听器绑定到父元素而非子元素。这种方法适用于动态生成的子元素或大量相似元素：
document.getElementById('parent').addEventListener('click', function(event) {
if (event.target.matches('.child')) {
// 处理子元素逻辑
}
});自定义事件触发
通过CustomEvent构造函数可以创建和派发自定义事件，实现组件间通信：
const customEvent = new CustomEvent('customEventName', {
detail: { key: 'value' }
});
element.dispatchEvent(customEvent);
element.addEventListener('customEventName', (e) => {
console.log(e.detail.key); // 输出 'value'
});性能优化建议
避免在频繁触发的事件（如scroll）中使用复杂逻辑，可通过防抖（debounce）或节流（throttle）优化：
function debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func.apply(this, args), delay);
};
}
window.addEventListener('resize', debounce(() => {
console.log('窗口大小改变');
}, 200));移除监听器
使用removeEventListener移除不再需要的事件监听，注意必须传入与添加时相同的函数引用：
function handleClick() { console.log('Clicked'); }
element.addEventListener('click', handleClick);
element.removeEventListener('click', handleClick);被动事件监听器
对于可能阻塞页面滚动的事件，添加{ passive: true }选项可提升滚动性能：
window.addEventListener('touchstart', () => {}, { passive: true });
