细说 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/