事件总览

1. 事件流：冒泡、捕获。

2. 事件处理程序

• 标签里的 onclick
• btn.onclick
• addEventListen('click', function)
• attachEvent('click', function)

3. 事件对象 event

4. 事件类型

1. UI事件：load, unloader, error, resize, scroll, select
2. 焦点事件：focus, blur
3. 鼠标与滚轮事件：click, dbclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup

   mouseenter：当鼠标移入某元素时触发。
   mouseleave：当鼠标移出某元素时触发。
   mouseover：当鼠标移入某元素时触发，移入和移出其子元素时也会触发。
   mouseout：当鼠标移出某元素时触发，移入和移出其子元素时也会触发。
   mousemove：鼠标在某元素上移动时触发，即便在其子元素上也会触发。
   mouseout、mouseover和mouseleave、mouseenter最大的区别，在于子元素连带触发。
   

   <style>
       .a{
         width: 500px;
         height: 500px;
         background: aliceblue;
       }
       .b{
         width: 200px;
         height: 200px;
         background: beige;
       }
       .c{
         width: 100px;
         height: 100px;
         background: violet;
       }
   </style>
    <div class="a">A
     <div class="b"
       onmouseenter="mouseenter()"
       onmouseleave="mouseleave()"
       onmouseout="mouseout()"
       onmouseover="mouseover()"
       onmousemove="mousemove(event)">B
       <div class="c">C
       </div>
     </div>
   </div>
   <script>
     function mouseenter(){
       console.log('mouseenter')
     }
     function mouseleave(){
       console.log('mouseleave')
     }
     function mouseout(){
       console.log('mouseout')
     }
     function mouseover(){
       console.log('mouseover')
     }
     function mousemove(event){
       console.log('mousemove')
     }
   </script>
   复制代码

4. 键盘事件：keydown, keyup
5. 变更事件：DOMSubtreeModified(dom树变化), DOMNodeInserted, DOMNodeRemoved,,,
6. HTML5 事件：contextmenu(自定义右键), beforeunload(页面卸载前), DOMContentLoad(DOM树以后就出发，不理会img,js,,是否下载完毕), readystatechange(IE), hashchange(URL #变化)
7. 触摸事件：touchstart, touchmove, touchend, touchcancel

5. 性能

限制页面中事件处理程序的数量，使用事件委托，适当时机移除事件处理程序。