有时候项目需求页面加载完后，需要模拟用户操作，自动点击按钮。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. 防止sql注入的小函数 以及一些小验证

    function test_input($data) { $data = trim($data); $data = stripslashes($data); $data = htmlspecialch ...

  2. jQuery基础（3）- ajax

    一.jQuery的ajax 1.什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML). 简言之,在不重载整个网页的情况下, ...

  3. 配置django图片上传与保存展示

    近来在研究django,发现有好多好玩的功能,比如图片上传,以前处理这个比较麻烦,现在我们来看看如何来处理图片上传与保存 1.在数据库设计的时候需要配置upload_to image = models ...

  4. 坑爹的Sun JDK

    Sun的这个java.lang.Throwable 源码 设计非常糟糕,完全没有扩展性, 我在IBM 的Java JDK下,继承java.lang.Throwable重新定义了一个ExceptionW ...

  5. 通过超链接启动App

    问题:微信里分享一个链接给你,你点击这个链接,一.如果你安装了这个钱包,那就直接打开钱包.二.如果没有安装钱包就跳转到下载钱包的地方 要点:首先要让浏览器知道 app 是谁,然后再让浏览器调用app ...

  6. 线程中消费者生产者的实例代码(使用Lock类)

    http://www.cnblogs.com/DreamDrive/p/6192685.html 这个是用synchronized关键字实现的. Lock可以替换synchronized. 上面用来做 ...

  7. (转)Python 日志处理（三） 日志状态码分析、浏览器分析

    原文:https://www.cnblogs.com/i-honey/p/7791564.html 在企业中,从日志中提取数据进行分析,可以帮助企业更加了解用户行为,用户最感兴趣的产品或者内容,分析得 ...

  8. h5 端图片上传-模拟多张上传

    1.由于后端的限制,上传图片到服务器只能的一张一张传2.显示图片预览是本地的图片3.根据服务器返回的结果拿到相应的路径保存到提交评论的接口中4.删除的时候,需要删除对应的路径,不要把删除的提交到评论的 ...

  9. 《松本行弘的程序世界》读书笔记（上）——面向对象、程序块、设计模式、ajax

    1. 前言 半个月之前买了这本书,还是经园子里的一位网友推荐的.到现在看了一半多,基础的都看完了,剩下的几章可做高级部分来看.这本书看到现在,可以说感触很深,必须做一次读书笔记! 关于这本书,不了解的 ...

  10. Vue + Element UI 实现权限管理系统 前端篇（四）：优化登录流程

    完善登录流程 1. 丰富登录界面 1.1 从 Element 指南中选择组件模板丰富登录界面,放置一个登录界面表单,包含账号密码输入框和登录重置按钮. <template> <el- ...