细说 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 APIchange 要领被触发的原因是:

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/

    原文作者:StephenLee
    原文地址: https://segmentfault.com/a/1190000000528218
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞