一、事件繫結

1.$("target").bind/unbind("事件名",handler)

$("target").bind/unbind("事件名",handler) 
    同addEventListener()
    .unbind三種過載: 
        .unbind("事件名",handler) 移除當前元素上，指定事件上的名為handler的處理函式。
        .unbind("事件名") 移除當前元素上，指定事件上的所有處理函式
        .unbind() 移除當前元素上，所有事件的監聽

2. $("target").one("事件名",handle)

$("target").one("事件名",handle)，同bind
    區別: 只觸發一次，觸發後，自動解綁

3.$("parent").delegate("selector","事件名",handler)

$("parent").delegate("selector","事件名",handler)
    原理: 簡化利用冒泡:
    1. 獲得目標元素: this->e.target
    2. 篩選目標元素: 第一個引數: "selector"
        只有滿足"selector"要求的元素，才能觸發事件

bind 與 .delegate 的區別
1. .bind直接繫結在目標元素上
    .delegate 繫結在父元素上
2. 監聽個數: .bind 監聽個數多——每個目標元素都新增
    .delegate 監聽個數少——只給父元素新增一個
3. 新增子元素自動獲得事件處理函式:
    .bind 只能對現有元素新增事件監聽
        新增元素無法自動獲得監聽
    .delegate 只要父元素下的元素，無論現有，還是新增，都能自動獲得父元素上統一的事件監聽　　

4. .on/off

1. 代替bind: .on("事件名",handler) 同bind
2. 代替delegate: .on("事件名","selector",handler)同delegate

5. .事件名

此方法僅對常用的事件提供了終極簡化

6.頁面載入後執行步驟

1. DOMContentLoaded: 僅DOM內容載入完，就可提前執行
    DOM內容僅包括: html和js
    提前觸發：只要不依賴於css和圖片的所有操作都可在DOM內容載入後，提前觸發
        比如: 事件繫結
    jq: $(document).ready(()=>{
        //DOM內容載入後，就可提前執行的操作
            //比如: 事件繫結
    })
    簡化: $().ready(()=>{
    更簡化: $(()=>{...})
        注意：寫在body結尾的script中的程式碼預設就是DOM內容載入後自動執行
2. window.onload 在所有頁面內容載入完成後自動觸發
    包括: html,css,js,圖片
    使用場景：js程式碼必須依賴css或圖片才能執行時

二、滑鼠事件和模擬觸發

1.滑鼠事件

mouseover  mouseout 進出子元素，會頻繁觸發父元素的處理函式
mouseenter  mouseleave 進入子元素，不再頻繁觸發父元素的處理函式
 簡寫: 如果同時繫結滑鼠進入和移出事件時，可簡寫為hover
    $(...).hover(
        e=>{...}  //給mouseenter
        ,
        e=>{...}  //給mouseleave
    )
    更簡化: 如果兩個處理函式，可用toggle統一為一個處理函式，則只需要傳一個引數即可

2.模擬觸發

雖然沒有觸發事件，但是依然可用程式模擬執行元素的事件處理函式
 語法:  $(...).trigger("事件名")
 更簡單: $(...).事件名()