jQuery 事件綁定

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

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

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

當(dāng)然，原理是這樣，具體操作時(shí)， on() 這個(gè)方法已經(jīng)把一切都封裝好了。

.on()

綁定事件

.off()

移除綁定

.one()

綁定單次事件

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

最基本的使用：

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

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

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

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

你看到是 div#btn 。

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

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

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

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

名字空間效果：

$('#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');
}

多個(gè)事件：

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

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

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

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

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

而 selector 則是一個(gè)過濾規(guī)則，這對(duì)于在前面講過的，在父級(jí)節(jié)點(diǎn)預(yù)定義不存在節(jié)點(diǎn)的行為很有用。

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

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

on() 的另外一種調(diào)用形式： .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);