目录
滚动事件和窗口事件是在网页开发中常用的两类事件,它们可以通过JavaScript来处理。
scroll:滚动事件:
滚动事件在用户滚动网页时触发。这可以是垂直滚动(向上或向下)或水平滚动(向左或向右)。
例子:
let wp = document.querySelector('.wp')
wp.onscroll = function(){
console.log(event);
};
滚动事件的属性和方法:
window.scrollX
:获取文档在水平方向已滚动的距离。window.scrollY
:获取文档在垂直方向已滚动的距离。
窗口事件:
窗口事件涵盖了浏览器窗口的各种变化,如窗口大小的改变、窗口的打开与关闭等。
resize:窗口大小改变事件:
window.addEventListener('resize', function() { // 窗口大小改变时执行的代码 });
beforeunload:
窗口关闭事件:
window.addEventListener('beforeunload', function(event) { // 在窗口关闭前执行的代码 // 可以用来询问用户是否真的要离开页面 event.preventDefault(); event.returnValue = ''; });
load:
窗口打开事件:
window.addEventListener('load', function() { // 页面完全加载后执行的代码 });
注意
这些事件可以用来实现响应式设计、动态调整页面元素等功能,提升用户体验。在处理这些事件时,需要考虑兼容性以确保在不同浏览器环境下都能正常运行。