当前位置：首页 > JavaScript

js实现事件监听实现

2026-01-31 19:42:22JavaScript

事件监听的基本概念

事件监听是指在特定事件发生时执行特定代码。JavaScript提供了多种方式来实现事件监听，包括HTML属性、DOM属性以及addEventListener方法。

通过HTML属性实现

在HTML元素中直接使用事件属性来绑定事件处理函数。例如，点击按钮时触发alert：

<button onclick="alert('按钮被点击了')">点击我</button>

通过DOM属性实现

通过JavaScript代码为DOM元素的事件属性赋值，实现事件监听。例如：

const button = document.querySelector('button');
button.onclick = function() {
    alert('按钮被点击了');
};

使用addEventListener方法

addEventListener是更灵活的事件监听方式，允许为同一事件添加多个监听器。语法如下：

js实现事件监听实现

element.addEventListener(event, function, useCapture);

其中：

event：事件类型（如'click'、'mouseover'）
function：事件触发时执行的函数
useCapture：可选参数，指定事件是否在捕获阶段处理（默认为false，即冒泡阶段）

示例：

js实现事件监听实现

const button = document.querySelector('button');
button.addEventListener('click', function() {
    alert('第一个监听器');
});
button.addEventListener('click', function() {
    alert('第二个监听器');
});

事件对象

事件处理函数可以接收一个事件对象参数，包含事件相关信息。例如获取点击的坐标：

button.addEventListener('click', function(event) {
    console.log(`点击位置：X=${event.clientX}, Y=${event.clientY}`);
});

移除事件监听

使用removeEventListener移除已添加的事件监听器。注意需要传入相同的函数引用：

const handler = function() {
    alert('将被移除的监听器');
};
button.addEventListener('click', handler);
button.removeEventListener('click', handler);

事件委托

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

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