JS-WebAPIs-其他事件(三)

• 页面加载事件

页面加载事件主要有二种事件,分别是load和DOMContentLoaded

  • 加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
  • 为什么要学?
  1. 有些时候需要等页面资源全部处理完了做一些事情
  2. 老代码喜欢把 script 写在 

load事件

  • 事件名:load
  • 监听页面所有资源加载完毕:

  • 注意:不光可以监听整个页面资源加载完毕,也可以针对某个资源绑定load事件 

DOMContentLoaded事件

  • 当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像等完 全加载
  • 事件名:DOMContentLoaded
  • 监听页面DOM加载完毕:

 总结:

•页面滚动事件

  • 什么是元素滚动事件?

滚动条在滚动的时候持续触发的事件

  • 为什么要学?

很多网页需要检测用户把页面滚动到某个区域后做一些处理, 比如固定导航栏,比如返回顶部

  • 事件名:scroll
  • 监听整个页面滚动:

  • 监听某个元素的内部滚动直接给某个元素加即可 

页面滚动事件-获取位置

  • 开发中,我们经常检测页面滚动的距离,比如页面滚动100像素,就可以显示一个元素,或者固定一个元素 

总结:

页面滚动事件-滚动到指定的坐标

  • scrollTo() 方法可把内容滚动到指定的坐标
  • 语法:
  • 元素.scrollTo(x, y)

• 页面尺寸事件

页面尺寸事件-获取元素宽高 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/335717.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Git教程学习:01 Git简介与安装

目录 1 版本控制1.1 什么是版本控制系统?1.2 本地版本控制系统1.3 集中式版本控制系统1.4 分布式版本控制系统 2 Git简史3 Git的安装3.1 在Linux上安装3.2 初次运行Git前的配置 1 版本控制 1.1 什么是版本控制系统? 版本控制系统(Version Control Syst…

LLaVA-Plus: Learning to Use Tools for Creating Multimodal Agents

LLaVA-Plus: Learning to Use Tools for Creating Multimodal Agents 最近在调研一些多模态大模型相关的论文,发现Arxiv上出的论文根本看不过来,遂决定开辟一个新坑《一页PPT说清一篇论文》。自己在读论文的过程中会用一页PPT梳理其脉络和重点信息&#…

【2023】java使用WebClient实现chatGPT调用建立web socket连接

💻目录 一、介绍1、使用技术2、效果 二、代码1、前端代码2、后端代码2.1、maven依赖2.2、model2.2.1、请求接口的格式2.2.2、响应数据对象 2.3、工具类2.3.1、🔴使用WebClient调用chatgpt方法2.3.2、🟠 webSocket连接对话方法 2.4、Controlle…

【微信小程序开发】环境介绍和基本使用

文章目录 前言1. 项目的基本组成结构1.1 JSON 配置文件的作用1.2 如何新建小程序页面1.3 修改项目首页1.4 WXML 模板1.5 WXSS 样式1.6 JS 逻辑交互 2. 宿主环境2.1 什么是宿主环境2.2 通信模型2.3 运行机制2.4 组件2.4.1 view 组件的基本使用:2.4.2 scroll-view 组件…

【数据结构与算法】1.时间复杂度和空间复杂度

📚博客主页:爱敲代码的小杨. ✨专栏:《Java SE语法》 ❤️感谢大家点赞👍🏻收藏⭐评论✍🏻,您的三连就是我持续更新的动力❤️ 🙏小杨水平有限,欢迎各位大佬指点&…

vue3前端开发,生命周期函数的基础练习

vue3前端开发,生命周期函数的基础练习! 下面先给大家看一个图片,帮助大家了解,vue3的生命周期函数,和旧版本vue2的生命周期函数,有什么变化。 如图所示,vue3里面,把前面2个函数,混在…

展锐T618_虎贲T618紫光展锐安卓核心板规格参数

基于紫光展锐八核T618平台的纯国产化方案,采用了开放的智能Android操作系统,并集成了4G网络、2.5G5G双频WIFI(可支持1*1 MIMO)、BLUETOOTH近距离无线传输技术以及GNSS无线定位技术。用户可以根据特定场合的需求,选择合适的嵌入式ARM核心模块&…

禅道的安装及使用

文章目录 1.禅道的下载安装2.禅道管理员管理账户3.禅道管理产品角色操作4.禅道关联需求 1.禅道的下载安装 1、禅道下载网址:http://www.zentao.net/ 2、下载好之后把该文件放到D盘上 3、双击点开然后点击”Extract“进行解压该文件 4、解压中 5、解压完就会出现…

Git学习笔记(第5章):Git团队协作机制

目录 5.1 团队内协作 5.2 跨团队协作 Git进行版本控制都是在本地库操作的。若想使用Git进行团队协作,就必须借助代码托管中心。 5.1 团队内协作 问题引入:成员1(大佬)利用Git在宿主机上初始化本地库,完成代码的整体…

Oracle 12CR2 RAC部署翻车,bug避坑经历

📢📢📢📣📣📣 哈喽!大家好,我是【IT邦德】,江湖人称jeames007,10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】!😜&am…

【原文链接】Tri-Perspective View for Vision-Based 3D Semantic Occupancy Prediction

原文链接:https://openaccess.thecvf.com/content/CVPR2023/papers/Huang_Tri-Perspective_View_for_Vision-Based_3D_Semantic_Occupancy_Prediction_CVPR_2023_paper.pdf 1. 引言 体素表达需要较大的计算量和特别的技巧(如稀疏卷积)&…

Java(spring cloud)智慧工地(项目层+工地层+APP)源码

智慧工地提供工地智能管理服务,打通数据壁垒,互通管理中心各平台。实现:“可视”、“可控”、“可管”。智慧工地管理云平台是一种利用人工智能和物联网技术来监测和管理建筑工地的系统。它可以通过感知设备、数据处理和分析、智能控制等技术…

chatgpt国内使用网站(免费收藏级)

如果您认为本文对你有帮助,希望可以点赞收藏!感谢您的支持 下面我为你推荐我自己在用的gpt类工具,帮你在工作学习生活上解决一些大小问题 🎉智能GPT 地址: https://meet.adminjs.net 在他的详情中有详细的使用介绍&am…

统信UOS_麒麟KYLINOS安装JDBC驱动包

原文链接:统信UOS/麒麟KYLINOS安装JDBC驱动包 亲爱的读者们,大家好!今天,我为大家带来一篇非常实用的技术文章——在统信UOS和麒麟KYLINOS操作系统上,如何使用Dbeaver连接Oracle数据库。Dbeaver是一个广泛使用的数据库…

工业设备管理系统:助力企业实现数字化转型

随着工业4.0和智能制造的快速发展,数字化转型已成为企业提升竞争力、适应市场变化的必然选择。工业设备管理系统作为数字化转型的关键组成部分,能够为企业提供实时监控、数据分析、预警和远程控制等功能,助力企业实现数字化转型的目标。 一、…

list上

文章目录 初步了解list面试题:为什么会有list?vector的缺点:vector、list优点 list结构迭代器的分类list的简单运用insert、erase、迭代器失效(和vector的区别)erase class和structlist的迭代器为什么这个迭代器的构造…

Lua 快速入门 · 教程笔记

Lua语言快速入门 教程笔记 前言1. Lua 语言介绍2. Lua 语言基础之基本语法声明变量声明方法使用 if - else使用 for使用 while 3. Lua 语言基础之表4. Lua 语言基础之数组插入元素移除元素获取表的长度全局表 5. Lua 语言面向对象之复制表的方式面向对象实现继承和重写父类方法…

SwiftUI 框架有哪些主要优势

SwiftUI是苹果公司在2019年推出的一种用于构建用户界面的框架,它使用Swift语言编写,并且与iOS、iPadOS、macOS、watchOS和tvOS等平台兼容。下面简单的看下有哪些主要的优势。 声明式的界面描述 使用声明式编程风格,通过简洁的代码描述用户界…

SSL证书影响网站搜索结果吗?

SSL(Secure Sockets Layer)证书作为保障网站信息安全的重要工具,其对于网站的搜索引擎优化(SEO)以及搜索结果的表现产生了深远影响。本文将深入探讨SSL证书如何作用于搜索结果,并分析它为何成为现代网络营销…

图片批量建码怎么用?每张图片快速生成二维码

当我们需要给每个人分别下发对应的个人证件类图片信息,比如制作工牌、荣誉展示或者负责人信息展示时,现在都开始使用二维码的方法来展示员工信息。那么如何快速将每个人员的信息图片分别制作成二维码图片呢,最简单的方法就是使用图片批量建码…