細說 jQuery 事件篇（六） - 模擬用戶操做

前陣子在調一個 bug 的時候遇到一個很坑的問題，在判斷一個輸入框是否有用戶輸入時觸發 updateModel 操做，並向後臺發送 PUT 請求，結果調試時一直調不通，最後才發現的由於當用戶輸入 # 後系統判斷這是個 tag 標籤，所以經過 val 方法直接修改了輸入框的內容，而經過 val 方法修改內容並不能觸發綁定在輸入框上的 change 方法。寫個相似的簡單例子以下：

<input type="text" />

jQuery 代碼以下：

$('input[type="text"]').change(function() {
    alert('input something!');
  })

  $('input[type="text"]').val('test');

上面這段經過 val 直接修改 input 內容的方法並不能觸發 change 事件內的處理程序 alert。
查看 jQuery API 上 change 方法被觸發的緣由是：

The change event is sent to an element when its value changes.

可是經過 val 方法直接修改元素的值並不能觸發 change 事件，只有當用戶真實輸入並改變 input 框的內容時纔有效。當時個人作法是：

$('input[type="text"]').val('test').change();

可是這種硬改的方法會顯得代碼有些 hard code。對於其餘情形下，咱們須要模擬用戶真實操做時應該用什麼方法進行統一處理呢？

模擬用戶操做

假設咱們須要模擬用戶的 click 操做，例如：

<button>test</button>

jQuery 代碼以下：

$('button').click(function() {
    alert('click!');//
  })

此時，若是咱們點擊 button 的話，確定能觸發 alert。可是假設咱們但願能模擬用戶的 click 操做，則須要用到 trigger 方法，修改代碼以下：

$('button').click(function() {
    alert('click!');//
  })

  $('button').trigger('click');

此時，不須要用戶進行點擊操做，經過 trigger('click') 已經模擬了一次用戶的 click 操做。
此時，再回到剛開始的那個例子，咱們就能夠寫成：

$('input[type="text"]').val('test').trigger('change');

模擬用戶操做也能夠應用於當用戶作出 A 操做時，模擬出用戶 B 操做，例如虛擬鍵盤，當用戶使用鼠標點擊虛擬鍵盤上的按鍵時，模擬用戶鍵盤上的真實操做。

參考

http://book.douban.com/subject/24669823/