jQuery事件綁定、鼠標事件

一、事件綁定

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("事件名")
 更簡單: $(...).事件名()