史上最全addEventListener示例整理

DOM 事件

• DOMContentLoaded: 在初始的 HTML 文档被完全加载和解析完成后触发（不等待样式表、图片等）。
• load: 在页面完全加载后触发（包括所有依赖的资源，如样式表和图片）。
• beforeunload 和 unload: 在页面即将被卸载前和卸载时触发。

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM fully loaded and parsed');
});

window.addEventListener('load', function() {
    console.log('Page fully loaded');
});

window.addEventListener('beforeunload', function(event) {
    // 处理即将卸载页面的情况
    event.preventDefault();
    event.returnValue = ''; // 某些浏览器需要返回值
});

window.addEventListener('unload', function() {
    console.log('Page unloaded');
});

表单事件

• change: 当元素的值改变时触发。
• input: 在元素的值正在改变时触发。
• submit: 在表单提交时触发。

document.querySelector('input').addEventListener('change', function(event) {
    console.log('Input value changed to:', event.target.value);
});

document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单提交的默认行为
    console.log('Form submitted');
});

Mutation 事件

• MutationObserver: 用于监视 DOM 树的变化（如节点的增加、删除、属性的变化等）。

const targetNode = document.getElementById('someElement');
const config = { attributes: true, childList: true, subtree: true };

const callback = function(mutationsList, observer) {
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

// 你可以稍后使用以下代码停止观察
// observer.disconnect();

Visibility 事件

• visibilitychange: 在文档的可见性状态改变时触发（如切换到另一个标签页或最小化窗口）。

document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'visible') {
        console.log('Page is visible');
    } else {
        console.log('Page is hidden');
    }
});

Resize 事件

• resize: 当窗口或框架的大小发生变化时触发。

window.addEventListener('resize', function() {
    console.log('Window resized to', window.innerWidth, 'x', window.innerHeight);
});

Scroll 事件

• scroll: 当页面或元素的滚动位置发生变化时触发。

window.addEventListener('scroll', function() {
    console.log('Window scrolled to', window.scrollX, window.scrollY);
});

Focus 事件

• focus 和 blur: 当元素获得或失去焦点时触发。

window.addEventListener('focus', function() {
    console.log('Window has focus');
});

window.addEventListener('blur', function() {
    console.log('Window lost focus');
});

Intersection Observer API

• IntersectionObserver: 用于异步观察目标元素与其祖先元素或顶级文档视窗的交叉状态。

const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            console.log('Element is in view');
        } else {
            console.log('Element is out of view');
        }
    });
});

const target = document.querySelector('#targetElement');
observer.observe(target);

Performance Observer API

• PerformanceObserver: 监听性能相关的事件，例如页面加载时间、资源加载时间等。

const observer = new PerformanceObserver((list) => {
    const entries = list.getEntries();
    for (const entry of entries) {
        console.log(`${entry.entryType}: ${entry.startTime} - ${entry.duration}`);
    }
});

observer.observe({ entryTypes: ['mark', 'measure', 'resource'] });

Media Query 事件

• matchMedia: 用于监听媒体查询的变化。

const mediaQuery = window.matchMedia('(max-width: 600px)');

mediaQuery.addEventListener('change', function(event) {
    if (event.matches) {
        console.log('Viewport is 600 pixels or less');
    } else {
        console.log('Viewport is more than 600 pixels');
    }
});

Geolocation API

• geolocation.watchPosition: 用于监听地理位置的变化。

if ('geolocation' in navigator) {
    navigator.geolocation.watchPosition((position) => {
        console.log('Current position:', position.coords.latitude, position.coords.longitude);
    }, (error) => {
        console.error('Error watching position:', error);
    });
}

Online/Offline 事件

• online 和 offline: 当浏览器网络连接状态发生变化时触发。

window.addEventListener('online', function() {
    console.log('Browser is online');
});

window.addEventListener('offline', function() {
    console.log('Browser is offline');
});

Clipboard 事件

• copy, cut, 和 paste: 当用户执行剪贴板操作时触发。

document.addEventListener('copy', function(event) {
    console.log('Content copied');
});

document.addEventListener('cut', function(event) {
    console.log('Content cut');
});

document.addEventListener('paste', function(event) {
    console.log('Content pasted');
});

Storage 事件

• storage: 当 Web Storage（localStorage 或 sessionStorage）的内容发生变化时触发。

window.addEventListener('storage', function(event) {
    console.log('Storage changed:', event.key, event.newValue);
});

Hash 变化事件

• hashchange: 当 URL 的哈希部分（#）发生变化时触发。

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

Popstate 事件

• popstate: 当活动历史记录条目更改时（例如，通过用户点击浏览器的“后退”按钮）触发。

window.addEventListener('popstate', function(event) {
    console.log('Location changed to:', window.location.href);
});

Page Visibility API

• visibilitychange: 当文档的可见性状态改变时触发。

document.addEventListener('visibilitychange', function() {
    if (document.visibilityState === 'visible') {
        console.log('Page is visible');
    } else {
        console.log('Page is hidden');
    }
});

Battery API

• chargingchange, levelchange: 当设备电池充电状态或电量级别变化时触发。

navigator.getBattery().then(function(battery) {
    battery.addEventListener('chargingchange', function() {
        console.log('Battery charging changed:', battery.charging);
    });

    battery.addEventListener('levelchange', function() {
        console.log('Battery level changed:', battery.level);
    });
});

Device Orientation 和 Device Motion

• deviceorientation 和 devicemotion: 当设备的方向或运动传感器数据变化时触发。

window.addEventListener('deviceorientation', function(event) {
    console.log('Device orientation:', event.alpha, event.beta, event.gamma);
});

window.addEventListener('devicemotion', function(event) {
    console.log('Device motion:', event.acceleration, event.rotationRate);
});

Pointer 事件

• pointerdown, pointerup, pointermove, pointerover, pointerout: 用于处理指针（鼠标、触摸、笔）相关的事件。

document.addEventListener('pointerdown', function(event) {
    console.log('Pointer down at:', event.clientX, event.clientY);
});

document.addEventListener('pointermove', function(event) {
    console.log('Pointer moved to:', event.clientX, event.clientY);
});

document.addEventListener('pointerup', function(event) {
    console.log('Pointer up at:', event.clientX, event.clientY);
});

Fullscreen 事件

• fullscreenchange: 当文档进入或退出全屏模式时触发。

document.addEventListener('fullscreenchange', function() {
    if (document.fullscreenElement) {
        console.log('Entered fullscreen mode');
    } else {
        console.log('Exited fullscreen mode');
    }
});

WebSocket 事件

• open, message, close, error: 用于监听 WebSocket 连接状态和消息。

const socket = new WebSocket('wss://example.com/socket');

socket.addEventListener('open', function(event) {
    console.log('WebSocket is open now.');
});

socket.addEventListener('message', function(event) {
    console.log('WebSocket message received:', event.data);
});

socket.addEventListener('close', function(event) {
    console.log('WebSocket is closed now.');
});

socket.addEventListener('error', function(event) {
    console.error('WebSocket error observed:', event);
});