有时候项目需求页面加载完后,需要模拟用户操作,自动点击按钮。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. ceph 源码安装 configure: error: "Can't find boost spirit headers"

    问题:configure: error: "Can't find boost spirit headers" 解决: 推荐:sudo apt-get install libboos ...

  2. IO模型 IO多路复用

    阻塞IO 用socket 一定会用到accept recv recvfrom这些方法正常情况下 accept recv recvfrom都是阻塞的 非阻塞IO 如果setblocking(False) ...

  3. Network - Tips

    001 - 查询whois 可通过在线工具进行查询: https://www.whois365.com http://whois.aliyun.com http://whois.chinaz.com ...

  4. Vue2.5开发去哪儿网App 第五章笔记 上

    1.css动画原理 .fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 2s; } .fade-leave-to{ o ...

  5. android开发学习——day1

    了解安卓系统架构:Linux内核层,系统运行层库,应用框架层,应用层 版本信息 android开发的特色之处就在于强大的组件功能 开发环境android stdio 2.0安装:把安装的组件都勾选上, ...

  6. 七、Framework类库

    1.Framework类库简介 .Net Framework类库包含Framework类库(Framework Class Library,FCL).FCL是一组DLL程序集的统称,其中含有数千个类型 ...

  7. PHP-引入文件(include)后,页面错位,不居中解决办法

    1.把include文件放在head里,不要放在html或doctype上面,这样可以解决居中的问题,空白行的话可以用<div style="display:none"> ...

  8. koa2 接收post参数

    koa2接收Post参数由于没有在上下文对象上解析,所以需要用node 原生req解析. 获取到的参数,要注意转码问题. const Koa = require('koa'); const app = ...

  9. Python学习--11 面向对象高级编程

    多重继承 Python里允许多重继承,即一个类可以同时继承多个类: class Mammal(Animal): pass class Runnable(object): def run(self): ...

  10. Redis注意事项

    1.Redis3.0没有虚拟内存概念,已从2.4就移除: 2.redis挂掉并重启时,如果有主从备份的,主机挂掉重启时先关掉主从备份,不然从机的数据会被冲洗掉 数据恢复时如果有 AOF(原理是将Rei ...