有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. 工程师计划1-> 项目管理1 | 项目与项目管理

    这学期报了一门课,项目管理,是一门网课,但跟之前不一样,我期待能够从这门课中学到一些东西.这是我上学期在组织毛概小组大作业时遇到困难时,意识到自己应该学习这门课. 工程师计划其实是一直以来想要把学习的 ...

  2. gurbi安装

    1,下载相应版本gurobi,msi文件,双击安装.注意安装路径,一般默认,否则容易出错. 2,注册gurobi账号,在校园网下电脑终端运行许可grbgetkey 3,添加许可路径到系统path 4, ...

  3. WIN10:显示文件后缀.exe

  4. JAVA_Scanner 键盘输入

    键盘输入语句 介绍:在编程中,需要接收用户输入的数据,就可以使用键盘输入语句来获取.Input.java , 需要一个 扫描器(对象), 就是 Scanner 步骤: 导入该类的所在包, java.u ...

  5. 动手学TCP——CS144实验感想

    在Stanford CS144的课程实验Lab0~Lab4中,我们动手实现了一个自己的TCP协议,并且能够真的与互联网通信!此外,感谢Stanford开源本实验并提供了大量的优质测试用例,使得我们仅仅 ...

  6. php 代码上线

    1:php软件界面点击Tools按步骤进行即可 2:二步 3:三步 user name 为root 4:四步 5:五步

  7. tp5 缩略图自写

    1:php终端 安装扩展 使用Composer安装ThinkPHP5的图像处理类库: composer require topthink/think-image2:控制器代码: public func ...

  8. 番茄钟的实现（基于Xilinx EGO1学习板）

    番茄钟设计 一.总体设计 1.番茄工作法简介 番茄工作法由意大利的奇列洛创造.其内容就是:工作25分钟休息5分钟,循环四次后休息15分钟. 本项目就是基于Xilinx Ego1开发板实现一个计时器,该 ...

  9. 华为交换机配置ACL详细步骤

    ACL 介绍 #2000-2999普通ACL,根据源IP过滤 #3000-3999高级ACL,根据源目的端口和源目的地址等过滤 #4000-4999二层ACL,根据源目的MAC等过滤 配置举例: 拒绝 ...

  10. 图解｜用好MySQL索引，你需要知道的一些事情

    我是蝉沐风. 这一篇文章来聊一聊如何用好MySQL索引. 为了更好地进行解释,我创建了一个存储引擎为InnoDB的表user_innodb,并批量初始化了500W+条数据.包含主键id.姓名字段(na ...