1.页面事件：

1.1 load

页面加载完成之后（包括所有图像、JavaScript文件、CSS文件等外部资源），就会触发window上面的load事件。

  1. <body>
  2.       <div id="demo"></div>
  3.         <script>
  4.           window.onload = function(){
  5.               alert("页面加载完成");
  6.             }
  7.         </script>
  8. </body>
  9. //当页面完全加载完成之后就会弹出一条“页面加载完成”的警告框。

1.2 resize

当浏览器窗口的大小发生变化时就会触发resize事件。

  1. <body>
  2.       <div id="demo"></div>
  3.         <script>
  4.           window.onresize = function(){
  5.               alert("浏览器窗口被改变");
  6.             }
  7.         </script>
  8. </body>
  9. //当我们改变浏览器窗口时就会弹出一条“浏览器窗口被改变”的警告框。

1.3 scroll

当元素的滚动条发生滚动是会触发scroll事件。

  1. <body>
  2.       <div id="demo"></div>
  3.         <script>
  4.           window.onscroll = function(){
  5.               alert("滚动事件");
  6.             }
  7.         </script>
  8. </body>
  9. //当元素的滚动条滚动时就会弹出一条“滚动事件”的警告框

2.鼠标事件：

2.1 click 和 dblclick

鼠标单击事件就是 click，双击事件就是 dblclick。

2.2 mouseover 和 mouseout

鼠标移入移出事件。

2.3 mousedown、mousemove 和 mouseup

mousedown 表示鼠标按下的一瞬间所触发的事件；
mousemove 表示鼠标移动时所触发的事件；
mouseup 表示鼠标松开的一瞬间所触发的事件。

3.键盘事件：

3.1 keydown、keyup 和 keypress

  1.     keydown：在用户按下键盘上的任意键时触发；<br />  keyup：在用户释放键盘上的键时触发；<br />  keypress：在用户按下键盘上的字符键时触发。<br />当用户按下键盘上的键时：首先会触发keydown事件，然后接跟着是keypress 事件，最后会触发keyup事件。

keydown 和 keypress 两个事件的区别：

1.keypress 事件只在按下键盘的任一“字符键”（如A~Z、数字键）时触发，单独按下“功能键”（如F1~F12、Ctrl键、Shift键、Alt键等）不会触发；而keydown 无论是按下“字符键”还是“功能键”都会触发。
2.按下“字符键”会同时触发 keydown 和 keypress 事件， 但这两个事件的顺序是：先触发keydown 事件，然后再是 jeypress 事件。

4.表单事件：

4.1 blur 和 focus

当用户在文本框输入信息时，将光标放在文本框中，文本框会获取焦点；当光标从文本框移出时，文本框就失去了焦点。
获取焦点所触发的事件是focus，失去焦点所触发的事件就是 blur。

4.2 change

当用户在文本框内输入文本时，文本框内字符串的改变将会触发change事件。