JavaScript 窗口/文档事件

本文被收录到:

JavaScript 教程

JavaScript 是互联网上最流行的编程语言。使用 JavaScript 可以开发网站、APP、小程序、游戏和服务器端。写这个教程是为了提高自己的 JavaScript 编程水平,而最好的学习方法就是“费曼学习法”,以教代学,以输出倒逼输入。最近日渐成熟的 AI 工具,刚好成为我写这个教程锦上添花。

目录

JavaScript 中的窗口(window)和文档(document)事件允许开发者监听浏览器窗口或HTML文档的各种状态变化和用户交互行为。以下是一些常用的窗口和文档事件:

窗口(Window)事件

  1. load: 当整个页面(包括图像、脚本等所有资源)加载完毕后触发。

    window.addEventListener('load', function() {
        console.log('页面加载完成!');
    });
  2. unload: 在窗口卸载页面之前触发,可以用于清理一些资源,如定时器。

    window.addEventListener('unload', function() {
        console.log('页面即将卸载!');
    });
  3. beforeunload: 在页面即将被卸载前触发,可以提示用户确认是否离开页面。

    window.addEventListener('beforeunload', function(event) {
        event.preventDefault(); // 阻止默认行为
        event.returnValue = "确定要离开吗?"; // 浏览器会显示此消息
    });
  4. resize: 当窗口尺寸发生改变时触发。

    window.addEventListener('resize', function() {
        console.log('窗口大小发生了改变!');
    });
  5. scroll: 当文档视口发生滚动时触发。

    window.addEventListener('scroll', function() {
        console.log('页面正在滚动!');
    });

文档(Document)事件

  1. DOMContentLoaded: 当初始的HTML文档被完全加载和解析完成之后,DOM树构建完成,但并不等待样式表、图片和子框架完成加载就会触发。

    document.addEventListener('DOMContentLoaded', function() {
        console.log('DOM树构建完成,可以操作DOM了!');
    });
  2. click: 当用户点击文档中的元素时触发。

    document.addEventListener('click', function(event) {
        console.log('文档中的元素被点击了!');
    });
  3. mousemove: 当鼠标指针在文档中移动时触发。

    document.addEventListener('mousemove', function(event) {
        console.log('鼠标位置:', event.clientX, event.clientY);
    });
  4. keydown/keyup: 分别在用户按下或释放键盘上的键时触发。

    document.addEventListener('keydown', function(event) {
        console.log('按键被按下:', event.key);
    });
    
    document.addEventListener('keyup', function(event) {
        console.log('按键被释放:', event.key);
    });

通过监听这些事件,开发者能够实现页面的动态交互、响应用户的操作以及优化用户体验。

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
搜神记
763 文章
4 教程
8 项目
随机推荐
JavaScript DOM 查找元素
CSS 改变 svg 图片颜色
JavaScript 事件流
JavaScript video 教程
WordPress 密码生成和密码验证
WordPress 常用函数 / sanitize_user
视频剪辑软件 Shotcut 笔记
JavaScript 鼠标事件