js实现event函数
事件监听与处理
在JavaScript中，可以通过addEventListener方法为DOM元素绑定事件。该方法接受三个参数：事件类型、回调函数和可选配置项（如capture或passive）。
const button = document.querySelector('button');
button.addEventListener('click', function(event) {
console.log('Button clicked', event.target);
});自定义事件触发
通过CustomEvent构造函数可以创建自定义事件，使用dispatchEvent方法触发事件。自定义事件可以携带数据通过detail属性传递。
const event = new CustomEvent('build', {
detail: { time: Date.now() }
});
document.dispatchEvent(event);
document.addEventListener('build', (e) => {
console.log('Custom event triggered', e.detail);
});事件委托优化
利用事件冒泡机制，将事件监听器绑定到父元素而非每个子元素，适合动态内容或大量子元素的场景。
document.querySelector('#parent').addEventListener('click', (event) => {
if (event.target.matches('.child')) {
console.log('Child element clicked', event.target);
}
});事件对象常用属性
事件回调函数接收的event对象包含多个有用属性：
target: 触发事件的原始元素currentTarget: 当前处理事件的元素（可能因冒泡与target不同）stopPropagation(): 阻止事件继续冒泡preventDefault(): 阻止默认行为
document.links[0].addEventListener('click', (e) => {
e.preventDefault();
console.log('Link click prevented');
});一次性事件绑定
通过{ once: true }选项可以让事件监听器只执行一次后自动移除。
button.addEventListener('click', () => {
console.log('This will only log once');
}, { once: true });被动事件监听器
标记为passive: true的事件监听器不会调用preventDefault()，适合滚动等需要优化性能的场景。
window.addEventListener('scroll', () => {
console.log('Scrolling');
}, { passive: true });
