有3个页面级事件在HTML5版本中被引入。

 事件  说明
 DOMContentLoaded  在DOM树形成后触发（与此同时，图片、CSS和JavaScript可能还在加载）。在这个事件中，脚本运行要早于load事件，因为load事件会等待所有资源（比如图片或广告）加载完之后才触发。这种方式会让页面看起来加载速度更快。
 hashchange  当URL的hash值变化时（不会造成整个窗口刷新）触发。hash值通常在链接中用来指定不同的部分（也被称作为锚点），在使用AJAX加载的页面内容中也会被使用。
 beforeunload  当页面被卸载之前在window对象上触发。

实例：

 1 <!DOCTYPE html>

 2 <html>

 3     <head>

 4         <meta charset="UTF-8">

 5         <title>DOMContentLoaded事件</title>

 6         <meta charset="UTF-8">

 7         <meta name="viewport" content="width=device-width, initial-scale=1.0">

 8     </head>

 9     <body>

10       用户名：  <input id="user" type="text"><br>

11       密码：  <input id="password" type="text"> <br>

12       其它：  <input id="message" type="text">

13

14         <script>

15             function setup() {

16                 var textinput;

17                 textinput = document.getElementById("user");

18                 // 设置焦点

19                 textinput.focus();

20             }

21

22             window.addEventListener('DOMContentLoaded',setup,false);

23

24         </script>

25     </body>

26 </html>

JavaScript HTML5事件的更多相关文章

  1. JavaScript 事件——“事件类型”中“HTML5事件”的注意要点

    contextmenu事件 该事件用以表示何时应该显示上下文菜单,以便开发者取消默认的上下文菜单,转而提供自定义的菜单. 因为该事件属于鼠标事件,所以其事件对象中包含与光标位置有关的所有属性.如: & ...

  2. javascript通用事件封装

    随着最近几年Html5的兴起,越来越多的应用采用html5进行实现,一个优秀的网页应用不但需要美观简洁的UI界面,更需要一个良好的交互.网页应用大部分的交互需要用javascript事件进行实现.虽然 ...

  3. HTML5事件

    Html5事件 contextmenu事件 用以表示何时应该显示上下文菜单,以便开发人员取消默认的上下文菜单而提供自定义的菜单. 由于此事件时冒泡的,因此可以为document指定一个事件处理程序,用 ...

  4. 10个最佳 Javascript+HTML5 演示文稿框架

    JavaScript 与 HTML5 框架在创建基于现代浏览器的演示文稿时发挥了重要作用.他们把展示插入网页,为演示信息提供了一个有效方式.一般来说,手工插入花费大量事件和精力,它很复杂,以至于新手们 ...

  5. javascript 的 事件类型（事件）

    事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行. 事件是文档或者浏览器窗口中发生的,特定的交互瞬间. 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都 ...

  6. 【JavaScript】事件

    一.前言         继续上一章的内容,继续今天的Js学习. 二.内容         事件处理程序 事件就是用户或浏览器自身执行的某种动作.而响应某个事件的函数就叫做事件处理程序 //HTML事 ...

  7. JavaScript HTML5脚本编程——“历史状态管理”的注意要点

    历史状态管理是现代Web应用开发中的一个难点.在现代Web应用中,用户的每次操作不一定会打开一个全新的页面,因此"后退"和"前进"按钮也就失去了作用,导致用户很 ...

  8. jQuery $(document).ready()和JavaScript onload事件

    jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...

  9. Javascript事件模型系列（四）我所理解的javascript自定义事件

    被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...

随机推荐

  1. MLD协议测试——网络测试仪实操

    一.简介 1. MLD简介 MLD · Multicast Listener Discovery Protocol · 组播侦听者发现协议 功能 · 在终端主机和与其直接相邻的组播路由器之间建立/维护 ...

  2. 【C#Task】TaskCreationOptions 枚举

    根据 TaskCreationOptions 的不同,出现了三个分支 LongRunning:独立线程,和线程池无关 包含 PreferFairness时:preferLocal=false,进入全局 ...

  3. 【vs2019 】调试技巧

    在这篇文章中,我们假定读者了解VS基本的调试知识,如: F5 开始使用调试器运行程序 F9 在当前行设置断点 F10 运行到下一个断点处 F5 从被调试的已停止程序恢复执行 F11 步进到函数内(如果 ...

  4. 《Symfony 5全面开发》教程03、使用Controller创建第一个页面

    我们使用Phpstorm打开我们的项目目录,展开项目目录文件夹. Symfony项目其实也是composer项目,如果你新拿到一个Symfony项目, 你可以在控制台中使用composer insta ...

  5. redis面试1-33

    目录 1.Redis你比较熟吧,说说它机制为什么快? 2.redis是单线程吗? 3.为什么redis需要把所有数据放到内存中? 4.Redis的回收策略有哪些? 5.MySQL里有2000w数据, ...

  6. 【译】C# 11 特性的早期预览

    原文 | Kathleen 翻译 | 郑子铭 Visual Studio 17.1(Visual Studio 2022 Update 1)和 .NET SDK 6.0.200 包含 C# 11 的预 ...

  7. Go基础知识梳理（二）

    Go基础知识梳理(二) 简单函数的定义 //有参数有返回值 func sum(a int, b int) int { return a + b } //无返回值 func sum(a int, b i ...

  8. 使用 kubebuilder 创建并部署 k8s-operator

    一.准备 本文中的示例运行环境及相关软件版本如下: Kubernetes v1.16.3 Go 1.15.6 Kubebuilder 3.1.0 Docker 20.10.7 安装kubebuilde ...

  9. Visual Studio快捷技能

    一.移动光标

  10. csrf跨站请求、相关装饰器、auth模块使用

    昨日内容回顾 django操作cookie和session # 作用:就是保存用户信息,保存一系列数据,还可以做缓存 保留一段时间 # session是基于cookie工作的 1. 数据是保存在服务端 ...