1. 程式人生 > 實用技巧 >jQuery 事件機制

jQuery 事件機制

    1. 註冊事件:
      1. on()
      2. bind()
      3. on()/bind()的區別
        • bind有三個引數,分別是event,data,function,也就是事件,額外要新增的資料,執行函式。
        • on有四個引數,分別是event,selector,data,function,分別是事件,選擇器,額外新增的資料,執行函式。
        • on可以指定具體的子元素,而bind得給每個子元素都新增一個事件
        • on可以繫結沒有頁面渲染時不存在的dom,bind不可以即不能動態繫結事件
1 $("p").bind("click",function(){
2       alert("這個段落被點選了。");
3 }"dbClick",function(){ 4 alert("這個段落被雙擊了。"); 5 }); 6 $("p").on("click",function(){ alert("段落被點選了。"); });

    1. 委託事件:
      • delegate()
      • 指定的元素(屬於被選元素的子元素)新增一個或多個事件處理程式,並規定當這些事件發生時執行的函式。
1 $("div").delegate("p","click",function(){
2     $("p").css("background-color","pink");
3 });
4  

      事件物件even(事件源)
even屬性如下

    • type: 事件型別,比如click。
    • which: 觸發該事件的滑鼠按鈕或鍵盤的鍵。
    • target: 事件發生的初始物件(當前元素)。
    • data:   傳入事件物件的資料。
    • pageX: 事件發生時,滑鼠位置的水平座標(相對於頁面左上角)。
    • pageY: 事件發生時,滑鼠位置的垂直座標(相對於頁面左上角)

      each()方法

    • each() 方法規定為每個匹配元素規定執行的函式,它可以用來遍歷任何一個集合,不管是一個JavaScript物件或者是一個數組,或者是一個JSon物件。
    • $("li").each(function(){

      alert($(this).text())

      });

      普通事件與繫結事件

    • 普通新增事件的方法不支援新增多個事件,最下面的事件會覆蓋上面的,而事件繫結(addEventListener)方式新增事件可以新增多個且支援冒泡與事件的捕獲。