js 监听实现
监听事件的基本方法
在JavaScript中，可以通过addEventListener方法监听DOM元素的事件。该方法接受三个参数：事件类型、回调函数和可选的选项对象。
element.addEventListener('eventType', function(event) {
// 事件处理逻辑
});常用事件类型
click：点击事件mouseover/mouseout：鼠标移入/移出keydown/keyup：键盘按下/释放focus/blur：获取/失去焦点submit：表单提交change：表单元素值改变scroll：滚动事件resize：窗口大小改变
事件委托模式
通过事件冒泡机制，可以在父元素上监听子元素的事件，适用于动态添加的元素。
parentElement.addEventListener('eventType', function(event) {
if(event.target.matches('childSelector')) {
// 处理子元素事件
}
});自定义事件
可以创建和触发自定义事件，实现组件间的通信。
// 创建事件
const customEvent = new CustomEvent('customEventName', {
detail: { /* 传递的数据 */ }
});
// 监听事件
element.addEventListener('customEventName', function(event) {
console.log(event.detail);
});
// 触发事件
element.dispatchEvent(customEvent);移除事件监听
为避免内存泄漏，需要移除不再使用的事件监听器。注意回调函数必须与添加时相同。
function handler() { /* ... */ }
element.addEventListener('eventType', handler);
element.removeEventListener('eventType', handler);被动事件监听器
对于频繁触发的事件（如scroll、touchmove），可以标记为被动以提高性能。
element.addEventListener('scroll', function() {}, { passive: true });一次性事件监听
使用{once: true}选项让事件只触发一次后自动移除。
element.addEventListener('click', function() {}, { once: true });跨浏览器兼容性处理
对于旧版IE浏览器（IE8及以下），需要使用attachEvent方法。
if(element.addEventListener) {
element.addEventListener('eventType', handler);
} else {
element.attachEvent('on' + eventType, handler);
}
