There are three page-level event was introduced in HTML5 version.
| event | Explanation |
| DOMContentLoaded | After the DOM tree form trigger (At the same time, images, CSS, and JavaScript may still be loaded). In this event, the script runs earlier in the load event is triggered only after the event because the load will wait for all the resources (such as images or advertising) is loaded. In this way the page looks will make loading faster. |
| hashchange | When changes hash value of the URL (without causing the entire window refresh) trigger. hash value is usually used in a link specify different portions (also referred to as the anchor), it will be used in the page content using AJAX to load in. |
| beforeunload | When the page is unloaded before the trigger on the window object. |
Example:
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>