当前位置：首页 > JavaScript

js on 实现

2026-02-01 18:42:35JavaScript

事件监听的基本语法

在JavaScript中，on事件通常通过HTML属性或addEventListener方法实现。HTML属性形式如onclick="function()"，直接内联在元素标签中。现代开发更推荐使用addEventListener，因其支持多个监听器且可灵活移除。

// HTML属性方式
<button onclick="alert('Clicked')">Click Me</button>

// addEventListener方式
document.querySelector('button').addEventListener('click', () => {
  alert('Clicked');
});

常用事件类型

鼠标事件：click、dblclick、mouseover、mouseout
键盘事件：keydown、keyup、keypress
表单事件：submit、change、focus、blur
窗口事件：load、resize、scroll

// 键盘事件示例
document.addEventListener('keydown', (event) => {
  console.log(`Key pressed: ${event.key}`);
});

事件对象与默认行为

事件处理函数接收一个event对象，包含事件相关信息（如触发元素、坐标、按键等）。通过event.preventDefault()可阻止默认行为（如表单提交、链接跳转）。

document.querySelector('a').addEventListener('click', (event) => {
  event.preventDefault();
  console.log('Link click prevented');
});

事件委托

利用事件冒泡机制，将事件监听器绑定到父元素而非每个子元素，提升性能并动态处理新增元素。

document.querySelector('ul').addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log('List item clicked:', event.target.textContent);
  }
});

js on 实现