当前位置：首页 > JavaScript

js事件实现

2026-04-07 05:30:33JavaScript

事件监听与处理

在JavaScript中，事件处理是响应用户交互或系统触发的动作的核心机制。通过事件监听器，可以捕获特定事件并执行相应代码。

使用addEventListener方法绑定事件：

element.addEventListener('click', function(event) {
  console.log('元素被点击');
});

事件对象

事件触发时会自动传入事件对象（通常命名为event或e），包含事件相关信息：

button.addEventListener('click', function(e) {
  console.log('坐标:', e.clientX, e.clientY);
  e.preventDefault(); // 阻止默认行为
});

事件委托

利用事件冒泡机制，在父元素上处理子元素事件：

js事件实现

document.getElementById('parent').addEventListener('click', function(e) {
  if(e.target.classList.contains('child')) {
    console.log('子元素被点击');
  }
});

常见事件类型

鼠标事件：

click 点击
dblclick 双击
mouseenter 鼠标进入
mouseleave 鼠标离开

键盘事件：

keydown 按键按下
keyup 按键释放

表单事件：

js事件实现

submit 表单提交
change 值改变
focus 获取焦点
blur 失去焦点

自定义事件

创建和触发自定义事件：

// 创建事件
const event = new Event('build');

// 监听事件
elem.addEventListener('build', function(e) { /*...*/ });

// 触发事件
elem.dispatchEvent(event);

事件移除

使用removeEventListener移除事件监听：

function handleClick() {
  console.log('只会执行一次');
  button.removeEventListener('click', handleClick);
}

button.addEventListener('click', handleClick);

事件传播控制

控制事件传播阶段：

// 捕获阶段
element.addEventListener('click', handler, true);

// 冒泡阶段（默认）
element.addEventListener('click', handler, false);

// 停止传播
function handler(e) {
  e.stopPropagation();
}