当前位置：首页 > JavaScript

js实现on

2026-03-15 06:31:34JavaScript

on 事件监听实现

在JavaScript中实现事件监听可以通过多种方式完成。以下是常见的几种方法：

addEventListener 方法

element.addEventListener('eventName', function(event) {
  // 事件处理逻辑
});

直接属性赋值

element.onclick = function(event) {
  // 点击事件处理逻辑
};

HTML内联事件

js实现on

<button onclick="handleClick()">点击</button>
<script>
function handleClick() {
  // 处理函数
}
</script>

事件委托模式

对于动态元素或大量子元素，使用事件委托更高效：

parentElement.addEventListener('click', function(event) {
  if(event.target.matches('.child-selector')) {
    // 处理特定子元素的事件
  }
});

自定义事件触发

创建和触发自定义事件：

js实现on

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

// 监听事件
element.addEventListener('customEvent', function() {
  console.log('自定义事件触发');
});

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

一次性事件监听

使用once选项让监听器只执行一次：

element.addEventListener('click', function() {
  console.log('只会执行一次');
}, { once: true });

事件对象常用属性

事件处理函数接收的事件对象包含有用信息：

element.addEventListener('click', function(event) {
  event.target;      // 触发事件的元素
  event.currentTarget; // 当前处理事件的元素
  event.preventDefault(); // 阻止默认行为
  event.stopPropagation(); // 阻止事件冒泡
});

移除事件监听

需要移除事件监听时，必须使用相同的函数引用：

const handler = function() {
  console.log('事件处理');
};

element.addEventListener('click', handler);
// 后续移除
element.removeEventListener('click', handler);