js实现监听
监听事件的基本方法
在JavaScript中，监听事件主要通过addEventListener方法实现。该方法允许为特定元素绑定事件处理函数，支持多种事件类型（如点击、键盘输入等）。
element.addEventListener('eventType', function(event) {
// 事件处理逻辑
});常见事件类型
- 鼠标事件：
click,mouseover,mouseout - 键盘事件：
keydown,keyup,keypress - 表单事件：
submit,change,focus - 窗口事件：
load,resize,scroll
事件委托模式
通过事件冒泡机制，可以在父元素上监听子元素的事件，适用于动态生成的元素。
parentElement.addEventListener('click', function(event) {
if (event.target.matches('.child-selector')) {
// 处理子元素事件
}
});移除事件监听
使用removeEventListener移除已绑定的事件处理函数，需确保移除的函数与绑定的函数是同一引用。
function handleClick() {
console.log('Clicked');
}
element.addEventListener('click', handleClick);
element.removeEventListener('click', handleClick);自定义事件
通过CustomEvent构造函数创建自定义事件，并配合dispatchEvent触发。
const customEvent = new CustomEvent('customEvent', {
detail: { key: 'value' }
});
element.addEventListener('customEvent', (e) => console.log(e.detail));
element.dispatchEvent(customEvent);被动事件监听器
添加{ passive: true }选项可优化滚动性能，避免阻塞主线程。
window.addEventListener('scroll', onScroll, { passive: true });一次性事件监听
使用{ once: true }选项使事件处理函数仅执行一次后自动移除。
button.addEventListener('click', () => {
console.log('This runs only once');
}, { once: true });
