js实现监听
事件监听基础
在JavaScript中，监听事件主要通过 addEventListener 方法实现。该方法接受三个参数：事件类型、回调函数及可选的配置项。
element.addEventListener('click', function(event) {
console.log('事件触发', event.target);
});常见事件类型
- 鼠标事件：
click、mouseover、mouseout - 键盘事件：
keydown、keyup - 表单事件：
submit、change、focus - 窗口事件：
resize、scroll
事件委托
通过父元素监听子元素事件，利用事件冒泡机制减少监听器数量。
document.getElementById('parent').addEventListener('click', function(event) {
if (event.target.classList.contains('child')) {
console.log('子元素被点击');
}
});移除监听
使用 removeEventListener 移除已绑定的事件，需确保回调函数为同一引用。
const handler = function() { console.log('仅触发一次'); };
element.addEventListener('click', handler);
element.removeEventListener('click', handler);自定义事件
通过 CustomEvent 创建和触发自定义事件。
const event = new CustomEvent('customEvent', { detail: { data: '自定义数据' } });
element.dispatchEvent(event);
element.addEventListener('customEvent', (e) => console.log(e.detail.data));性能优化
- 使用事件委托减少监听器数量。
- 对高频事件（如
scroll、resize）添加防抖（debounce）或节流（throttle）。 - 在不需要时及时移除监听器，避免内存泄漏。
兼容性处理
旧版IE（IE8及以下）使用 attachEvent 而非 addEventListener，需做兼容判断。
if (element.attachEvent) {
element.attachEvent('onclick', handler);
} else {
element.addEventListener('click', handler);
}
