当前位置：首页 > JavaScript

js 实现监听

2026-02-01 01:16:16JavaScript

事件监听基础方法

使用 addEventListener 绑定事件到DOM元素，支持多个监听器：

const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
  console.log('Button clicked', event.target);
});

自定义事件派发与监听

创建并触发自定义事件，适用于组件通信：

// 创建事件
const event = new CustomEvent('customEvent', { detail: { data: 'example' } });

// 监听事件
document.addEventListener('customEvent', (e) => {
  console.log('Custom event triggered:', e.detail);
});

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

监听对象属性变化

通过 Proxy 或 Object.defineProperty 实现数据响应式：

// Proxy 方式
const target = { value: 1 };
const handler = {
  set(obj, prop, newVal) {
    console.log(`Property ${prop} changed to ${newVal}`);
    obj[prop] = newVal;
    return true;
  }
};
const proxy = new Proxy(target, handler);
proxy.value = 2; // 触发日志输出

// Object.defineProperty 方式
const obj = {};
let internalValue = '';
Object.defineProperty(obj, 'value', {
  get() { return internalValue; },
  set(newVal) {
    console.log('Value changed:', newVal);
    internalValue = newVal;
  }
});
obj.value = 'new'; // 触发日志输出

监听URL哈希变化

捕获浏览器地址栏哈希变化：

window.addEventListener('hashchange', () => {
  console.log('Hash changed:', window.location.hash);
});

监听滚动事件优化

使用节流（throttle）减少滚动事件触发频率：

function throttle(func, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastCall >= delay) {
      func.apply(this, args);
      lastCall = now;
    }
  };
}

window.addEventListener('scroll', throttle(() => {
  console.log('Scrolling:', window.scrollY);
}, 200));

监听表单输入变化

实时监听输入框内容变化（使用 input 事件）：

const input = document.getElementById('search');
input.addEventListener('input', (e) => {
  console.log('Input value:', e.target.value);
});

监听子元素事件（事件委托）

通过父元素代理监听动态子元素事件：

js 实现监听

document.getElementById('parent').addEventListener('click', (e) => {
  if (e.target.classList.contains('child')) {
    console.log('Child element clicked:', e.target);
  }
});

标签: js