细说 jQuery 事件篇（六） - 模拟用户操作

syoya 发布于2019-08-19 14:53 / 3507人阅读

摘要：查看上方法被触发的原因是但是通过方法直接修改元素的值并不能触发事件，只有当用户真实输入并改变框的内容时才有效。但是假设我们希望能模拟用户的操作，则需要用到方法，修改代码如下此时，不需要用户进行点击操作，通过已经模拟了一次用户的操作。

前阵子在调一个 bug 的时候遇到一个很坑的问题，在判断一个输入框是否有用户输入时触发 updateModel 操作，并向后台发送 PUT 请求，结果调试时一直调不通，最后才发现的因为当用户输入 # 后系统判断这是个 tag 标签，因此通过 val 方法直接修改了输入框的内容，而通过 val 方法修改内容并不能触发绑定在输入框上的 change 方法。写个类似的简单例子如下：

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 操作，例如：

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/

GPU云服务器云服务器模拟单击事件 java怎么模拟事件模拟用户登录事件jquery

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78164.html

细说 jQuery 事件篇（二） - 处理简单事件

摘要：我们可以利用可以对用户发起的事件进行处理，这里以样式转换为例来说明。其他类似的操作事件都可以通过这个方法，将处理事件的程序绑定到同名事件上面。我们可以利用 jQuery 可以对用户发起的事件进行处理，这里以样式转换为例来说明。增添样式基于用户的事件，对特定的 DOM 元素样式进行转换是 jQuery 处理事件中比较常见的情形，举例说明，当用户点击输入框后，会增添 highli...

ckllj 2019-08-19 14:51 评论0 收藏0
细说 jQuery Ajax操作篇（一） - 数据加载

摘要：同样将其绑定在按钮点击事件上查看结果为这里需要注意，如果文档内的格式错误，虽然不会报错，但是将无法执行回调函数。 Ajax 通俗来讲即不需要刷新页面即可从服务器或客户端上加载数据，当然这些数据的格式是多种多样的。加载 HTML 我们通常使用加载 HTML 的方法来加载 HTML 片段，并插入到指定位置，假设当前页面为： load showImg(http://segmen...

paulli3 2019-08-21 12:21 评论0 收藏0
细说 jQuery 事件篇（四） - 改变事件过程

摘要：事件对象是一种结构，它会在元素获得处理事件的机会时传递给调用的事件处理程序。事件对象的属性指的是事件目标，它将保存发生事件的目标元素。所以，接下来我们就要想办法改变事件过程来阻止这个行为。在《细说 jQuery 事件篇（三） - 事件传播》中提到了事件冒泡可能造成的弊端，当时举了 mouseout 的例子，对于 mouseout 这个特殊情况，我们可以用 hover 方法来解决，...

nifhlheimr 2019-08-19 14:53 评论0 收藏0
细说 jQuery DOM操作篇（二） - DOM 树操作

摘要：此时，点击新建的将会触发。设置元素内容的方法则使用上述两种方法，将新内容作为参数传递即可，例如修改上例中的文本内容方法同理。我们知道通过 $() 函数可以访问文档中的元素，并返回一个 jQuery 对象，并且通过一系列方法，我们可以修改元素的样式和内容，实际上，我们还可以通过该函数做更多的事情，例如添加、删除、复制等操作来改变 DOM 树的结构。创建元素我们可以通过 $() ...

Anchorer 2019-08-21 12:20 评论0 收藏0
细说 jQuery 事件篇（三） - 事件传播

摘要：是如何决定由哪个元素来处理事件的，以及又是如何优化处理这个问题的，这些都涉及到了事件传播。事件冒泡的弊端事件冒泡可能会导致意料之外的行为，例如在响应事件时，依旧是上例，当为最外层的添加一个事件。使用方法可以避免事件传播导致的问题。 Javascript 是如何决定由哪个元素来处理事件的，以及 jQuery 又是如何优化处理这个问题的，这些都涉及到了事件传播。事件传播策略当页面内...

Cc_2011 2019-08-19 14:51 评论0 收藏0