js实现event
事件监听与触发
在JavaScript中，事件处理是交互式网页开发的核心。通过事件监听和触发机制，可以实现用户操作与程序逻辑的关联。
添加事件监听
使用addEventListener方法绑定事件处理函数，该方法接收三个参数：事件类型、回调函数及可选配置。例如监听按钮点击事件：
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Button clicked!', event.target);
});移除事件监听
通过removeEventListener移除已注册的事件，需确保回调函数引用一致：
const handler = () => console.log('Event handled');
element.addEventListener('click', handler);
element.removeEventListener('click', handler);自定义事件触发
JavaScript允许创建和派发自定义事件，用于组件间通信或模拟原生事件。
创建自定义事件
使用CustomEvent构造函数，可携带自定义数据：
const event = new CustomEvent('build', {
detail: { time: Date.now() },
bubbles: true,
cancelable: true
});派发自定义事件
通过dispatchEvent方法触发事件：
document.dispatchEvent(event);事件委托模式
利用事件冒泡机制，在父元素上统一处理子元素事件，适合动态内容或大量子元素场景。
实现事件委托
通过event.target判断实际触发元素：
document.getElementById('parent').addEventListener('click', (event) => {
if (event.target.classList.contains('child')) {
console.log('Child element clicked');
}
});事件对象常用属性
事件回调函数接收的事件对象包含关键信息：
target：触发事件的原始元素currentTarget：当前处理事件的元素stopPropagation()：阻止事件继续冒泡preventDefault()：阻止默认行为
异步事件处理
结合Promise或async/await处理异步事件流：
button.addEventListener('click', async () => {
const data = await fetchData();
console.log('Data loaded:', data);
});性能优化建议
避免频繁添加/移除事件监听，考虑使用事件委托。对于高频事件如scroll或resize，使用防抖（debounce）或节流（throttle）技术优化性能。
以上方法覆盖了JavaScript事件处理的主要场景，包括基础监听、自定义事件和性能优化技巧。实际开发中可根据具体需求选择合适的方式。
