JQuery 自动触发事件
JQuery
常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果。例如在用户进入页面后,就触发click事件,而不需要用户去主动单击。
在JQuery中,可以使用trigger()方法完成模拟操作。例如可以使用下面的代码来触发id为btn的按钮的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事件,不会得到焦点。
JQuery 自动触发事件的更多相关文章
- jQuery 自动触发事件的坑
有时候项目需求页面加载完后,需要模拟用户操作,自动点击按钮.Jquery中可以使用trigger()方法模拟事件. $(selector).trigger(event,[param1,param2,. ...
- jQuery自动触发事件
转自:https://blog.csdn.net/CY_LH/article/details/78982218 常用模拟 有时候,需要通过模拟用户操作,来达到单击的效果.例如在用户进入页面后,就触发c ...
- jquery 自动触发事件 trigger
trigger() 栗子: 需求:我们在做二级联动的时候往往会遇到这样的需求,后台管理端页面加载完成后显示用户的省份,城市,并且可以对用户的省份,城市信息可以修改 如果只是简单的显示 你完全可以直接放 ...
- jquery自动触发click事件
$("").trigger("click"); //jquery的自动触发事件
- 原生js自动触发事件
熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为, ...
- 使用jQuery中trigger()方法自动触发事件
一.常用事件 在页面加载完成时 自动触发input的点击事件,在移动端可以实现自动弹出输入法,获得焦点 $("input").trigger("click") ...
- jquery trigger 触发事件小计 -- 关于a标签
jquery -- trigger触发执行事件方法虽然好用,偶尔也会出些小问题. 在最近得一个项目中需要触发a标签的点击事件时,我就遇到了点小问题.我很想当然的写层这样:$("a" ...
- javascript和jquery 获取触发事件的元素
一个很简单的问题,却因为大意,经常忘了处理,导致程序运行出错. <!DOCTYPE html> <html> <head> <meta charset=&qu ...
- Gwt ListBox选中自动触发事件
以前用TreeView显示,需求更改 需要做一个ListBox控件显示数据,和HTML中的<Select>标签一样 编辑时候自动触发选中的数据子类: 1.只要自动触发了rootListBo ...
随机推荐
- bzoj 2287: 【POJ Challenge】消失之物
Description ftiasch 有 N 个物品, 体积分别是 W1, W2, ..., WN. 由于她的疏忽, 第 i 个物品丢失了. "要使用剩下的 N - 1 物品装满容积为 x ...
- 初学C#和MVC的一些心得,弯路,总结,还有教训(2)--关于Entity Framework
看了一堆视频教程后,感觉基本了解的差不多了,可以动手.....因为最好的学习方法就是实践嘛.... 所以打算从网站做起,在WebForm和MVC之间选了MVC,因为感觉高大上...也比较灵活 于是买了 ...
- Android Monkey压力测试
Monkey 是Android SDK提供的一个命令行工具, 可以简单,方便地运行在任何版本的Android模拟器和实体设备上. Monkey会发送伪随机的用户事件流,适合对app做压力测试. 1为什 ...
- Switch&NAT 测试
测试环境: PC1:Windows10 iperf3 PC2:Ubuntu iperf3 都装有千兆网卡,直连的iperf速度是935Mbps. 因为TXRX两个方向的数据是差不多的,下面的测试数据只 ...
- 使用 antd Table组件, 异步获取数据
使用React.js + Redux + antd 制作CMS 后台内容管理系统,分享一点点积累,欢迎讨论. 在this.state中初始化数据: this.state = { pageNum:1, ...
- 教你一招:Win10切换输入法与Win7一样(Ctrl + 空格)
对于win10的朋友,大部分人对输入法都不习惯,如果你把英语输入法删除了,在中文输入法里没有美式键盘,让ctrl+空格与ctrl+Shift都能在搜狗输入法和美式键盘切换.下面小编就教你怎么让Win1 ...
- Jquery 关于span标签的取值赋值用法
span是最简单的容器,可以当作一个形式标签,其取值赋值方法有别于一般的页面元素. //赋值 $("#spanid").html(value) //取值 $("#span ...
- ETL基础1(概念)
抽取(Extract): 一般抽取过程需要连接到不同的数据源,以便为随后的步骤提供数据.这一部分看上去简单而琐碎,实际上它是 ETL 解决方案的成功实施的一个主要障碍. 转换(Transform): ...
- ElasticSearch-5.0安装head插件
环境 Windows10企业版X64 JDK-1.8 ElasticSearch-5.0.0 node-v4.5.0-x64.msi git客户端 步骤 安装node到D盘.如D:\nodejs. 把 ...
- CSS知识回顾--读《CSS 那些事儿》笔记
由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开, ...