有时候项目需求页面加载完后,需要模拟用户操作,自动点击按钮。Jquery中可以使用trigger()方法模拟事件。

$(selector).trigger(event,[param1,param2,...])

event:必须,规定指定元素上要触发的事件。可以是自定义事件和标准事件。

param1,param2,...可选。传递到事件处理程序的额外参数。

额外的参数对自定义事件特别有用。

例如,模拟点击事件可以用以下的语句

$('#btn').trigger("click");
$('#btn').click();

但是,trigger()方法有一个问题,trigger() 方法触发被选元素上指定的事件以及事件的默认行为(比如表单提交)。某些情况下会带来一些不必要的后果,然而大多数的博客都都只说了trigger怎么用,没有讲会带来什么问题。

这里就需要介绍另外一个方法triggerHandler(),triggerHandler() 不触发事件的默认行为。

trigger()与 triggerHandler() 方法相比的不同之处:
  • 它不会引起事件(比如表单提交)的默认行为
  • .trigger() 会操作 jQuery 对象匹配的所有元素,而 .triggerHandler() 只影响第一个匹配元素。
  • 由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡;如果目标元素不直接处理它们,则不会发生任何事情。

以下菜鸟教程中有详细的代码参考

菜鸟教程在线编辑

jQuery 自动触发事件的坑的更多相关文章

  1. JQuery 自动触发事件

    JQuery 常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果.例如在用户进入页面后,就触发click事件,而不需要用户去主动单击. 在JQuery中,可以使用trigger()方法完成模拟操 ...

  2. jQuery自动触发事件

    转自:https://blog.csdn.net/CY_LH/article/details/78982218 常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果.例如在用户进入页面后,就触发c ...

  3. jquery 自动触发事件 trigger

    trigger() 栗子: 需求:我们在做二级联动的时候往往会遇到这样的需求,后台管理端页面加载完成后显示用户的省份,城市,并且可以对用户的省份,城市信息可以修改 如果只是简单的显示 你完全可以直接放 ...

  4. jquery自动触发click事件

    $("").trigger("click"); //jquery的自动触发事件

  5. 原生js自动触发事件

    熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为, ...

  6. 使用jQuery中trigger()方法自动触发事件

    一.常用事件 在页面加载完成时  自动触发input的点击事件,在移动端可以实现自动弹出输入法,获得焦点 $("input").trigger("click") ...

  7. jquery trigger 触发事件小计 -- 关于a标签

    jquery -- trigger触发执行事件方法虽然好用,偶尔也会出些小问题. 在最近得一个项目中需要触发a标签的点击事件时,我就遇到了点小问题.我很想当然的写层这样:$("a" ...

  8. javascript和jquery 获取触发事件的元素

    一个很简单的问题,却因为大意,经常忘了处理,导致程序运行出错. <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  9. Gwt ListBox选中自动触发事件

    以前用TreeView显示,需求更改 需要做一个ListBox控件显示数据,和HTML中的<Select>标签一样 编辑时候自动触发选中的数据子类: 1.只要自动触发了rootListBo ...

随机推荐

  1. 深入理解String类

    1.String str = "eee" 和String str = new String("eee")的区别 先看一小段代码, public static v ...

  2. 大众点评Cat--架构分析

    转自:http://blog.csdn.net/szwandcj/article/details/51025669 Cat功能强大且多,光日志的报表和图表分析就有十几种,但文档却很少,寥寥无几找到一些 ...

  3. [Vue] vue-cli3.0安装

    1. node.js安装https://nodejs.org/en/download/ 2.npm的安装 由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了.同样可以通过输入 &qu ...

  4. Mac OSX配置XAMP虚拟主机

    在前端工作中,有时候需要配置下环境,这篇文章主要是记录了在wamp中配置虚拟主机 首先需要下载wamp软件和navicat数据库管理软件进行管理,下面默认已经下载好所需软件.并且打开服务. 第一步:把 ...

  5. 不能将 CHECK_POLICY 和 CHECK_EXPIRATION 选项设为 OFF (关)

    数据库用户信息死活无法修改..老是出现错误当 MUST_CHANGE 为 ON (开)时,不能将 CHECK_POLICY 和 CHECK_EXPIRATION 选项设为 OFF (关). (Micr ...

  6. JDK并发包总结

    本文主要介绍jdk中常用的同步控制工具以及并发容器, 其结构如下: 同步控制工具类 ReentrantLock 简而言之, 就是自由度更高的synchronized, 主要具备以下优点. 可重入: 单 ...

  7. C#读取注册表中二进制类型的值(REG_BINARY)

    如需要读取注册表中某个键的值, 例如读取DriverDesc对应的值,一般情况下为String类型,读取代码如下: RegistryKey driverKey = Registry.LocalMach ...

  8. PBN飞越转弯Flyover衔接TF、CF航段保护区组图

    PBN飞越转弯Flyover衔接TF.CF航段虽不常用,但也很重要,与旁切转弯有一定的相似性. 飞越转弯 flyover-TF/CF 叠加图: 飞越转弯 flyover-TF/CF 分解图:

  9. POJ 2262 Goldbach's Conjecture (打表)

    题目链接: https://cn.vjudge.net/problem/POJ-2262 题目描述: In 1742, Christian Goldbach, a German amateur mat ...

  10. HTTPS知识小结

    HTTPS知识小结 背景1:TCP握手 internet上的两台机器A,B要建立起HTTP连接了,在这之前要先建立TCP连接,情景大概是这样子的: A:你好,我跟你建立一个TCP好吗? B:好啊. A ...