当前位置：首页 > JavaScript

js实现event

2026-02-02 04:17:11JavaScript

事件监听与触发

在JavaScript中实现事件处理通常涉及事件监听和事件触发。可以通过addEventListener方法监听DOM元素的事件，或自定义事件通过Event构造函数和dispatchEvent方法触发。

// 监听点击事件
document.getElementById('button').addEventListener('click', function(event) {
    console.log('Button clicked');
});

// 自定义事件触发
const customEvent = new Event('customEvent');
document.dispatchEvent(customEvent);

自定义事件对象

通过CustomEvent构造函数可以创建带数据的自定义事件，传递额外信息给事件监听器。

js实现event

const event = new CustomEvent('build', { detail: { time: new Date() } });

document.addEventListener('build', function(e) {
    console.log('Event triggered at:', e.detail.time);
});

document.dispatchEvent(event);

事件委托

事件委托利用事件冒泡机制，在父元素上监听子元素的事件，适用于动态添加的元素或大量子元素。

document.getElementById('parent').addEventListener('click', function(event) {
    if (event.target.matches('button.child')) {
        console.log('Child button clicked');
    }
});

移除事件监听

使用removeEventListener移除已注册的事件监听器，需确保回调函数是同一引用。

js实现event

function handleClick() {
    console.log('Clicked once');
    document.removeEventListener('click', handleClick);
}

document.addEventListener('click', handleClick);

事件冒泡与捕获

事件传播分为捕获阶段和冒泡阶段，可通过addEventListener的第三个参数控制监听阶段。

// 捕获阶段触发
document.getElementById('outer').addEventListener('click', function() {
    console.log('Outer captured');
}, true);

// 冒泡阶段触发（默认）
document.getElementById('inner').addEventListener('click', function() {
    console.log('Inner bubbled');
});

阻止默认行为与冒泡

调用event.preventDefault()阻止默认行为（如表单提交），event.stopPropagation()阻止事件冒泡。

document.getElementById('link').addEventListener('click', function(event) {
    event.preventDefault();
    event.stopPropagation();
    console.log('Link click handled without navigation');
});