jQuery 自动触发事件的坑

有时候项目需求页面加载完后，需要模拟用户操作，自动点击按钮。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 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。

以下菜鸟教程中有详细的代码参考
菜鸟教程在线编辑

原文地址：https://www.cnblogs.com/ghq120/p/10050000.html

时间： 2024-10-09 14:58:29

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

JQuery 自动触发事件

常用模拟有时候,需要通过模拟用户操作,来达到单击的效果.例如在用户进入页面后,就触发click事件,而不需要用户去主动单击. 在JQuery中,可以使用trigger()方法完成模拟操作.例如可以使用下面的代码来触发id为btn的按钮的click事件. 1 $('#btn').trigger("click"); 这样,当页面加载完毕后,就会立刻输出想要的效果.也可以直接简写click(),来达到同样的效果: 1 $('#btn').click(); 触发自定义事件 trigger()

jQuery自动触发事件

<html> <head> <title></title> </head> <style> *{ margin:0; padding:0; } .father{ width:200px; height:200px; background:red; } .father .son{ width:100px; height:100px; background:blue; } </style> <script src=&qu

219 jQuery事件处理： off() 解绑事件，trigger() 、triggerHandler() 自动触发事件

? 当某个事件上面的逻辑,在特定需求下不需要的时候,可以把该事件上的逻辑移除,这个过程我们称为事件解绑.jQuery 为我们提供了多种事件解绑方法:die() / undelegate() / off() 等,甚至还有只触发一次的事件绑定方法 one(),在这里我们重点讲解一下 off() ; 语法演示代码 <body> <div></div> <ul> <li>我们都是好孩子</li> <li>我们都是好孩子<

原生js自动触发事件

熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为,如点击(click)操作等. 标准使用dispatchEvent方法,IE6/7/8则使用fireEvent方法. dispatchEvent() 方法给节点分派一个合成事件. 语法如下: dispatchEvent(eventObj) eventObj 参数是一个描述事件的 ActionScrip

自动触发事件

今天做一个页面需要自动触发超链接,第一次了解到trigger函数,可以自动触发事件,语法为:$(selector).triggger(event). 例如:$("#btn").triigger("click");也可以简写为$("#btn").click(); 但是对于超链接,我做的时候这两种方式都做不到自动跳转,暂时还不知道为什么,反而用下面的方式实现了: $("a")[0].click(); 在这过程中,学习到了两种自动跳

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

一.常用事件在页面加载完成时自动触发input的点击事件,在移动端可以实现自动弹出输入法,获得焦点 $("input").trigger("click").focus(); 还有一种简写方式: $("input").click(); 还有其它事件就不一一列出了. 二.自定义事件 $("#btn").on("myClick",function(){ alert("自定义事件"); }

JQuery手动触发事件API之：通过代码看清trigger与triggerHandler的差别

本文只讨论JQuery如何手动触发DOM上绑定的事件处理函数,至于如何给DOM绑定事件处理函数,可以参考这篇文章.测试环境是IE11/FF17/Chrome39,JQuery版本是1.11.1和2.1.1都测试过. 下面这段js代码给button绑定了click事件处理函数,第一种是我们最常用的做法:第二种使用了自定义参数. // 绑定事件的时候不自定义参数 $("#button").bind("click",function(event){ alert("

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

一个很简单的问题,却因为大意,经常忘了处理,导致程序运行出错. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <ul> <li> <ul> <li>listone</li> <li>listtwo

除trigger()方法外的jquery手动触发事件

trigger()可以触发指定事件是大家基本都知道的了. 除了trigger()之外我们也可以这样来触发: html 1 <div id="box" style="height: 100px; width: 100px; background: #ff0000;"></div> javascript 1 $(function(){ 2 $('#box').click(function(){ 3 alert(11111); 4 }); 5 6