js 实现监听
监听事件的基本方法
使用 addEventListener 方法可以监听 DOM 元素的事件：
element.addEventListener('eventType', function(event) {
// 事件处理逻辑
});eventType 可以是 click、mouseover、keydown 等标准事件。
监听自定义事件
通过 CustomEvent 创建并触发自定义事件：
const event = new CustomEvent('customEvent', {
detail: { key: 'value' }
});
element.addEventListener('customEvent', (e) => {
console.log(e.detail.key); // 输出 'value'
});
element.dispatchEvent(event);监听对象属性变化
使用 Proxy 或 Object.defineProperty 监听对象属性变化：
const obj = { value: 1 };
const proxy = new Proxy(obj, {
set(target, property, value) {
console.log(`${property} 被修改为 ${value}`);
target[property] = value;
return true;
}
});
proxy.value = 2; // 输出 "value 被修改为 2"监听数组变化
通过重写数组原型方法监听数组变化：
const array = [];
const arrayMethods = ['push', 'pop', 'shift', 'unshift'];
arrayMethods.forEach(method => {
const original = Array.prototype[method];
Array.prototype[method] = function(...args) {
console.log(`数组执行了 ${method} 操作`);
return original.apply(this, args);
};
});
array.push(1); // 输出 "数组执行了 push 操作"监听浏览器窗口变化
使用 resize 事件监听窗口大小变化：
window.addEventListener('resize', () => {
console.log(`窗口大小变为 ${window.innerWidth}x${window.innerHeight}`);
});监听网络状态变化
通过 online 和 offline 事件监听网络连接状态：
window.addEventListener('online', () => {
console.log('网络已连接');
});
window.addEventListener('offline', () => {
console.log('网络已断开');
});监听页面可见性变化
使用 visibilitychange 事件监听页面可见性：
document.addEventListener('visibilitychange', () => {
console.log(`页面可见性: ${document.visibilityState}`);
});监听键盘输入
通过 keydown、keyup 事件监听键盘操作：
document.addEventListener('keydown', (event) => {
console.log(`按下按键: ${event.key}`);
});监听鼠标移动
使用 mousemove 事件监听鼠标位置：
document.addEventListener('mousemove', (event) => {
console.log(`鼠标位置: X=${event.clientX}, Y=${event.clientY}`);
});监听表单输入变化
通过 input 事件监听表单元素值的变化：
const input = document.querySelector('input');
input.addEventListener('input', (event) => {
console.log(`输入值: ${event.target.value}`);
});监听子元素变化
使用 MutationObserver 监听 DOM 树变化：
const observer = new MutationObserver((mutations) => {
mutations.forEach(mutation => {
console.log('DOM 发生了变化');
});
});
observer.observe(document.body, {
childList: true,
subtree: true
});监听滚动事件
通过 scroll 事件监听元素滚动：
window.addEventListener('scroll', () => {
console.log(`当前滚动位置: ${window.scrollY}`);
});监听剪贴板操作
使用 copy、cut、paste 事件监听剪贴板：
document.addEventListener('copy', (event) => {
console.log('内容被复制');
});监听媒体查询变化
通过 matchMedia 监听媒体查询结果变化：
const mediaQuery = window.matchMedia('(max-width: 600px)');
mediaQuery.addListener((event) => {
console.log(`窗口宽度小于600px: ${event.matches}`);
});监听 WebSocket 连接
监听 WebSocket 的各种状态事件：
const socket = new WebSocket('ws://example.com');
socket.addEventListener('open', () => {
console.log('WebSocket 连接已建立');
});
socket.addEventListener('message', (event) => {
console.log(`收到消息: ${event.data}`);
});监听 Worker 消息
通过 message 事件监听 Web Worker 通信：
const worker = new Worker('worker.js');
worker.addEventListener('message', (event) => {
console.log(`收到Worker消息: ${event.data}`);
});监听 Promise 状态
使用 then 和 catch 监听 Promise 状态变化：
fetch('https://api.example.com/data')
.then(response => {
console.log('请求成功');
})
.catch(error => {
console.log('请求失败');
});监听路由变化
在单页应用中监听路由变化：
window.addEventListener('hashchange', () => {
console.log(`路由哈希变为: ${window.location.hash}`);
});
// 或者使用 History API
window.addEventListener('popstate', () => {
console.log('路由状态发生变化');
});监听组件生命周期（框架示例）
以 Vue 为例监听组件生命周期：
export default {
created() {
console.log('组件已创建');
},
mounted() {
console.log('组件已挂载');
}
};监听全局错误
通过 error 事件监听全局错误：
window.addEventListener('error', (event) => {
console.log(`发生错误: ${event.message}`);
});
