JavaScript HTML5事件

有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>

 

posted @ 2019-08-02 19:58  梦人亭  阅读(417)  评论(0)  编辑  收藏  举报