js 实现监听
事件监听基础方法
在JavaScript中，可以通过addEventListener方法监听DOM事件。语法如下：
element.addEventListener(eventType, callbackFunction, useCapture);eventType: 事件类型（如"click"、"keydown"）。callbackFunction: 事件触发时执行的函数。useCapture（可选）: 布尔值，指定事件捕获阶段（true）或冒泡阶段（false，默认）。
示例：监听按钮点击事件
const button = document.querySelector('button');
button.addEventListener('click', () => {
console.log('按钮被点击');
});移除事件监听
使用removeEventListener移除已添加的监听器，需传入与添加时相同的函数引用：
const handler = () => console.log('仅触发一次');
button.addEventListener('click', handler);
button.removeEventListener('click', handler);监听自定义事件
通过CustomEvent创建和触发自定义事件：
const event = new CustomEvent('customEvent', { detail: { data: '自定义数据' } });
element.addEventListener('customEvent', (e) => console.log(e.detail.data));
element.dispatchEvent(event); // 触发事件监听对象属性变化
使用Proxy或Object.defineProperty监听对象属性变化：
Proxy示例
const target = { value: 1 };
const proxy = new Proxy(target, {
set(obj, prop, newVal) {
console.log(`属性 ${prop} 从 ${obj[prop]} 变为 ${newVal}`);
obj[prop] = newVal;
return true;
}
});
proxy.value = 2; // 输出日志监听URL哈希变化
通过hashchange事件监听URL哈希部分的变化：
window.addEventListener('hashchange', () => {
console.log('哈希值变为:', window.location.hash);
});监听浏览器窗口大小变化
使用resize事件监听窗口尺寸变化：
window.addEventListener('resize', () => {
console.log('窗口尺寸:', window.innerWidth, window.innerHeight);
});监听表单输入变化
实时监听输入框内容变化（使用input事件）：
const input = document.querySelector('input');
input.addEventListener('input', (e) => {
console.log('当前输入:', e.target.value);
});性能优化建议
- 对于高频事件（如
scroll、mousemove），使用节流（throttle）或防抖（debounce）减少回调执行次数。 - 在不需要时及时移除监听器，避免内存泄漏。
