事件總覽

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. 性能

限制頁面中事件處理程序的數量，使用事件委託，適當時機移除事件處理程序。