有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. excel仪表盘制作，商业智能仪表盘的作用

    ​商业仪表盘被称为管理驾驶舱的重要组成部分,无论是管理决策者,还是企业业务流程中的普通员工,都可以利用它来展示分析的结果,让决策更加快速准确,更快地推动业务流程的进展,提高工作效率. 一个明确地了解自 ...

  2. C# Struct结构的介绍

    C# (Struct)结构的介绍 在 C# 中,所有简单值类型都是结构类型.结构类型是一种可封装数据和相关功能的值类型 ,是隐式密封的值类型,不可继承. 使用 struct 关键字定义结构类型.str ...

  3. random_sample() takes at most 1 positional argument (2 given)

    是random模块下的sample函数,而不是np.random.

  4. UnicodeDecodeError

    'gbk' codec can't decode byte 0x80 in position xx open文件时,添加参数'encoding='utf-8' 'utf-8' codec can't ...

  5. Python：Scrapy（一） 基础知识与实例

    学习自: Scrapy爬虫框架教程(一)-- Scrapy入门 - 知乎 Scrapy爬虫框架,入门案例(非常详细)_ck784101777的博客-CSDN博客_scrapy爬虫案例 爬虫框架Scra ...

  6. 解决Js中的resize事件执行两次的方法

    问题: 页面自适应的时候需要用到js的resize事件,但在执行过程中发现只要触发resize事件就会执行2次 原生js: window.onresize = function(){ console. ...

  7. 华山论剑之 PostgreSQL sequence (二)

    rename 对 sequence 的影响 关联列与 sequence 后,即 sequence 属于该列后,drop 表或列时会自动 drop 相关 sequence. 但如果对表或列 rename ...

  8. C#发送邮件，可带有Excel附件

    记录工作中遇到发邮件带附件的需求,新建控制台应用程序,目录下创建好所需要的定义好的Excel模板! class Program { static string newExcelPath = strin ...

  9. 【python】人脸识别

    #coding:utf-8# from __future__ import print_functionfrom time import time #有些步骤要计时,看每个步骤花多长时间import ...

  10. LGP5341题解

    SAM一道很裸的题... 题意很明确,不再阐述. 做法很简单:找到所有出现次数为 \(k\) 的子串,然后统计. 怎么找到这些字符串呢?SAM 只能找出等价类啊. 注意 parent tree 的父亲 ...