JQuery 自己主动触发事件

经常使用模拟

有时候,须要通过模拟用户操作,来达到单击的效果。比如在用户进入页面后,就触发click事件,而不须要用户去主动单击。

在JQuery中。能够使用trigger()方法完毕模拟操作。比如能够使用以下的代码来触发id为btn的button的click事件。

1 $(‘#btn‘).trigger("click");

这样,当页面载入完成后。就会立马输出想要的效果。也能够直接简写click()。来达到相同的效果:

1 $(‘#btn‘).click();

触发自己定义事件

trigger()方法不仅能触发浏览器支持的具有同样名称的事件。也能够触发自己定义名称的事件。比如为元素绑定一个“myClick”的事件。JQuery代码例如以下:

1 $(‘#btn‘).bind("myClick",
function(){  
2      $(‘#test‘).append("<p>我的自己定义事件.</p>");  
3  });

想要触发这个事件,能够使用下面代码来实现:

1 $(‘#btn‘).trigger("myClick");

传递数据

trigger(type[,data])方法有两个參数。第1个參数是要触发的事件类型,第2个參数是要传递给事件处理函数的附加数据,以数组形式传递。

通常能够通过传递一个參数给回调函数来差别这次事件是代码触发的还是用户触发的。

以下是一个传递数据的样例。

1 $(function(){  
2    $(‘#btn‘).bind("myClick",
function(event, message1, message2){  
3                  $(‘#test‘).append(
"<p>"+message1 + message2 +"</p>");  
4     });  
5    $(‘#btn‘).click(function(){  
6         $(this).trigger("myClick",["我的自己定义","事件"]);  
7    }).trigger("myClick",["我的自己定义","事件"]);  
8 })

运行默认操作

trigger()方法触发事件后,会运行浏览器默认操作。比如:

1 $("input").trigger("focus");

以上代码不仅会触发为<input>元素绑定的focus事件,也会使<input>元素本身得到焦点(这是浏览器的默认操作)。

假设仅仅想触发绑定的focus事件,而不想运行浏览器默认操作,能够使用jQuery中还有一个类似的方法——triggerHandler()方法。

1 $("input").triggerHandler("focus");

该方法会触发<input>元素上绑定的特定事件,同一时候取消浏览器对此事件的默认操作。即文本框仅仅触发绑定的focus事件,不会得到焦点。

时间: 2024-12-05 20:57:25

JQuery 自己主动触发事件的相关文章

js 主动触发事件

//主动触发事件:触发鼠标被按下事件 var btn2 =document.getElementById("btn2"); var btn = document.getElementById("btn"); //步骤1:先创建1个事件 var evObj = document.createEvent("MouseEvents"); //步骤2:初始化这个event evObj.initEvent("click",true,tr

工作积累(三)——使用jQuery实现回车触发事件

输入用户名密码后敲击回车即可登录是一个普通到我们经常会忽略的功能,然而之前并不知道如何实现.jQuery 可以帮我们迅速实现这一功能,方式如下. 1.jQuery代码: $(function() {     $("#login-input").keyup(function(e){         if(e.which === 13) {             $("#submit-button").click();         }     });       

原生js自动触发事件

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

javaScript 的option触发事件

先说jquery的option触发事件,很方便 $("option:selected")//这样就能直接触发选择的option了 在JavaScript中就显得比较麻烦,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. <select id="pid" onchange="gradeChange(this.value)"> <option grade="1&q

JQuery 自动触发事件

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

jquery中动态新增的元素节点无法触发事件解决办法

在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法. 比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“reply”,如果你用的是$(".reply").click(function(){ //do something... }),想必后面通过ajax加载进来的列表中的回复按钮,点击事件会失效. 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点lo

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("

解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法

解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法,如下: 为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: ? 1 2 3 4 5 6 7 8 9 10 11 <p id="pLabel">新加一条</p> <ul id="ulLabel">  <li class="liLabel">aaa1</li>  <li class="li

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

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