有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. kali linux 出现 E: 您在 /var/cache/apt/archives/ 上没有足够的可用空间。

    问题: E: 您在 /var/cache/apt/archives/ 上没有足够的可用空间. 软链接到HOME下的一个目录即可,home下新建debs文件夹: 在某个空间大的分区建立一个目录,然后把/ ...

  2. [Python]小白入门时遇到的各种问题

    Q:关于Python2.X和Python3.X各种版本有什么区别,小白应该选哪个? A: 1.背景及简要介绍 Python 2 发布于 2000 年年底. 随着 Python 2 的不断发展,更多的功 ...

  3. 2022必须拥有Chrome扩展程序 - 浏览器插件，让你上网效率翻倍

    在Chrome网上应用店中查找扩展程序 2022必须拥有Chrome扩展程序 - 浏览器插件,让你上网效率翻倍 可扩展的Chrome Web浏览器比某些人认识的功能强大得多.您可以自定义浏览体验,使其 ...

  4. 360携手HarmonyOS打造独特的“天气大师”

    做创新,首先要找到有增长趋势的流量红利,对我们来说,HarmonyOS就是绝佳的合作伙伴. --申悦 360手机助手创研产品部负责人 一.我们是谁? 我们来自360,是一支致力于孵化新业务的内部创新小 ...

  5. WPF中使用OpenFileDialog打开文件

    添加Microsoft.Win32程序集 private void OnOpenFile(object sender, EventArgs e) { OpenFileDialog openFileDi ...

  6. over the Wall

    最近风头很紧,先上两个可用的谷歌镜像给各位应急. https://kfd.me/ http://gufenso.coderschool.cn/ https://github.com/gfw-break ...

  7. 正则表达式（二）——Python中的相关方法

    正则函数 match.search.findall.finditer.split.sub 返回一个对象:match.search.finditer 返回一个列表:findall.split 其中mat ...

  8. Dapr 弹性的策略

    云原生应用需要处理 云中很容易出现瞬时故障.原因在以下文档 暂时性故障处理[1] 中有具体说明. 任何环境.任何平台或操作系统以及任何类型的应用程序都会发生暂时性故障. 在本地基础结构上运行的解决方案 ...

  9. 『现学现忘』Docker基础 — 22、使用Docker安装Nginx

    目录 步骤1:搜索镜像 步骤2:下载Nginx镜像 步骤3:运行Nginx镜像 步骤4:进行本机测试 步骤5:进入容器内操作 步骤6:测试外网访问容器 步骤1:搜索镜像 使用docker search ...

  10. x86-7-页式管理（Paging）

    x86-7-页式管理(Paging) 页式管理是重中之重! 在段式管理下操作系统的运作出现了很多问题,因为段的长度不定,在分配内存时,可能会发生内存中的空闲区域小于要加载的段,或者空闲区域远远大于要加 ...