当前位置：首页 > JavaScript

js实现事件

2026-01-31 22:54:29JavaScript

事件监听与处理

在JavaScript中，事件处理是通过事件监听器实现的。事件监听器允许在特定事件发生时执行代码。常见的事件包括点击、鼠标移动、键盘输入等。

// 添加点击事件监听器
document.getElementById('myButton').addEventListener('click', function() {
    console.log('按钮被点击了');
});

事件对象

事件处理函数接收一个事件对象作为参数，该对象包含事件的详细信息。例如，可以获取鼠标位置或按下的键盘键。

document.addEventListener('keydown', function(event) {
    console.log('按下的键:', event.key);
});

事件冒泡与捕获

事件在DOM中传播有两种方式：冒泡和捕获。冒泡是从目标元素向上传播到根元素，捕获是从根元素向下传播到目标元素。

js实现事件

// 捕获阶段监听
document.getElementById('parent').addEventListener('click', function() {
    console.log('捕获阶段');
}, true);

// 冒泡阶段监听
document.getElementById('child').addEventListener('click', function() {
    console.log('冒泡阶段');
});

阻止默认行为

某些事件有默认行为，例如点击链接会跳转。可以通过事件对象的方法阻止这些默认行为。

document.querySelector('a').addEventListener('click', function(event) {
    event.preventDefault();
    console.log('阻止了链接跳转');
});

事件委托

事件委托利用事件冒泡机制，将事件监听器添加到父元素，减少监听器数量，提高性能。

js实现事件

document.getElementById('list').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('点击了列表项:', event.target.textContent);
    }
});

自定义事件

JavaScript允许创建和触发自定义事件，用于组件间通信或复杂交互。

// 创建自定义事件
const event = new CustomEvent('myEvent', { detail: { message: '自定义事件触发' } });

// 监听自定义事件
document.addEventListener('myEvent', function(e) {
    console.log(e.detail.message);
});

// 触发自定义事件
document.dispatchEvent(event);

移除事件监听器

为避免内存泄漏，不再需要的事件监听器应当被移除。需要确保移除的函数与添加的函数是同一引用。

function handleClick() {
    console.log('点击事件');
}

document.getElementById('myButton').addEventListener('click', handleClick);

// 移除事件监听器
document.getElementById('myButton').removeEventListener('click', handleClick);

事件节流与防抖

对于频繁触发的事件（如滚动、输入），可以使用节流或防抖优化性能。

// 防抖函数
function debounce(func, delay) {
    let timeout;
    return function() {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, arguments), delay);
    };
}

// 节流函数
function throttle(func, limit) {
    let inThrottle;
    return function() {
        if (!inThrottle) {
            func.apply(this, arguments);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

// 使用防抖优化输入事件
document.getElementById('search').addEventListener('input', debounce(function() {
    console.log('输入:', this.value);
}, 300));