jQuery 事件綁定

在 jQuery1.7 之后，推薦統(tǒng)一使用 on() 來進行事件綁定。

在講事件綁定之前，需要首先明確一個概念。通常，我們是需要對具體的節(jié)點的相關事件作處理，比如一個按鈕被點擊了之類的。但這里有一個問題，如果我們能獲取到具體的節(jié)點，當然沒什么說的。不過有時，我們要處理的節(jié)點卻還沒有存在，但是我們又要預定義它的事件處理。比如，我們說在一個 UL 中，每一個 LI 被點擊時，都要執(zhí)行一個函數(shù)。但是， UL 中的內容本身可能是變化的，開始時它只有兩個 LI ，之后又變成了三個 LI ，多出的那一個 LI 也要能響應事件才行。

上述的情況是一個普遍的需求。我們可以利用事件的冒泡機制來實現(xiàn)目的。我們把事件處理綁定在 UL 上，這樣，當 LI 被點擊時，會冒泡到上級的 UL ，這樣在處理事件時就可以判斷出具體是哪個節(jié)點的事件，以便作下一步處理。

當然，原理是這樣，具體操作時， on() 這個方法已經把一切都封裝好了。

.on()

綁定事件

.off()

移除綁定

.one()

綁定單次事件

on() 的基本使用方式是： .on(event, handler)

最基本的使用：

$('#btn').on('click',
  function(eventObj){
    console.log('haha')；
  }
);

對于 handler ，它默認的上下文是觸發(fā)事件的節(jié)點（與行為節(jié)點無關）：

<div id="btn">
  <div>哈哈</div>
  <div id="btn2">哈哈</div>
  <div>哈哈</div>
</div>

$('#btn').on('click',
  function(eventObj){
    console.log(this);
  }
);

你看到是 div#btn 。

當然，使用 $.proxy() 你可以隨意控制上下文：

$('#btn').on('click',
  $.proxy(function(eventObj){
    console.log(this.a);
  }, {a: 123})
);

event 參數(shù)還支持通過：

• 以 . 分割的子名字，這些名字父子的名字空間效果。
• 以空格分割的多個事件。

名字空間效果：

$('#btn').on('click.my',
  function(eventObj){
    console.log('123');
  }
);

var f = function(){
  $('#btn').off('click.my');
}

$('#btn').on('click.my.other',
  function(eventObj){
    console.log('123');
  }
);

var f = function(){
  $('#btn').off('click.my');
}

多個事件：

$('#btn').on('click.my click.other',
  function(eventObj){
    console.log('123');
  }
);

var f = function(){
  $('#btn').off('click.my');
}

on() 的擴展使用方式為： .on( events [, selector] [, data], handler(eventObject) ) 。

其中的 data 是一個數(shù)據(jù)存儲空間，在 eventObj.data 中訪問到。

$('#btn').on('click', {a: 123},
  function(eventObj){
    console.log(eventObj.data.a);
  }
);

而 selector 則是一個過濾規(guī)則，這對于在前面講過的，在父級節(jié)點預定義不存在節(jié)點的行為很有用。

<div id="btn">
  <span>哈哈</span>
</div>

$('#btn').on('click', 'p',
  function(eventObj){
    console.log('here');
  }
);
var f = function(){
  $('#btn').append('<p>新的</p>');
}

on() 的另外一種調用形式： .on( events-map [, selector] [, data] ) ：

$('#btn').on(
  {
    'click': function(eventObj){console.log('click')},
    'mousemove': function(eventObj){console.log('move')}
  }
);

off() 的使用方式與 on() 完全類似：

var f = function(eventObj){
  console.log('here');
}
$('#btn').on('click', f);
$('#btn').off('click');
$('#btn').off('click', '.cls');
$('#btn').off('click', f);