HTML之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);
});
`