Jquery事件機制
JavaScript中已經學習過了事件,但是jquery對JavaScript事件進行了封裝,增加並擴展了事件機制,jquery不僅提供了更加優雅的事件處理方法,而且極大的增強了事件處理的能力
jquery事件發展歷程(了解)
簡單事件綁定----bind事件綁定----delegate事件綁定------on事件綁定(推薦)
註冊簡單事件 缺點:一次只能註冊一個事件
$("p").click(function(){})
//bind註冊事件 註冊多個事件
//delegate委托、代理事件
$("div").delegate("selector","事件","函數");
給div註冊委托事件,最終執行的元素為selector執行什麽事件--函數
第一個參數:selector-----事件最終由誰執行
第二個參數:-------事件類型
第三個參數:------函數,事件做什麽
好處:動態創建也有事件
壞處:只能註冊委托事件
on註冊事件(重點)
jquery1.7之後,jquery用on統一了所有事件的處理方法,最新代的方式,兼容zepto(移動端類似jquery的一個庫)強烈建議使用。
1.on註冊簡單事件
$(selector).on("click",function(){});
//表示給元素指定事件,並由自己觸發,不支持動態綁定
2.on註冊委托事件
$(selector).on("click","span",function(){});
//表示給元素綁定代理事件,當然必須是它的內部元素span才能觸發這個事件,支持動態綁定
3.on註冊事件的語法:
第一個參數:event,綁定事件的名稱可以由空格分開的多個事件
第二個參數:selector,執行事件的後代元素(可選),如果沒有後代元素,那麽事件講有自己執行
第三個參數:data,傳遞給處理函數的數據,事件觸發的時候通過event.data來使用(不常用)
第四個參數:handler,事件處理函數
$(selector),on(events,[selector],[data],handler);
事件解綁
unbind方式(不用)
$(selector).unbind(); 解綁所有的事件
$(selector).unbind("click") 解綁指定的事件
undelegate(不用)
$(selector).undelegate(); 解綁所有的delegate事件
$(selector).undelegate(“click”); 解綁指定的delegate事件
Jquery事件機制