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事件,不会得到焦点。
JQuery 自己主动触发事件的更多相关文章
- 主动触发事件 自定义事件 trigger 及其用法
1. 触发自定义事件方式 js.jq 2. jq 触发 2.1 默认支持的事件 $('#h').on('click',function(){ $(this).append('<p>p< ...
- js和jquery中的触发事件
改别人的坑,遇到jquery选择器和fireEvent混用,不认识fireEvent方法报错. js的方法不能使用jquery的选择器去调用. 1.fireEvent (IE上的js方法 ) 我们来看 ...
- js jq 主动触发事件
js的自定义事件与触发 //主动触发事件:触发鼠标被按下事件 var btn2 =document.getElementById("btn2"); var btn = docume ...
- jquery的实时触发事件(textarea实时获取中文个数)
jquery的实时触发事件(textarea实时获取中文个数) (2014-09-16 11:49:50) 转载▼ 标签: 实时触发事件 中文个数 onpropertychange oninput o ...
- jQuery-1.9.1源码分析系列(十) 事件系统——主动触发事件和模拟冒泡处理
发现一个小点,先前没有注意的 stopPropagation: function() { var e = this.originalEvent; ... if ( e.stopPropagation ...
- 选项卡切换:自动定时&主动触发事件
最初学习的是手动触发事件,添加的是onmouseover,其中index是关键,tab标签与现实内容的div索引一一对应,遍历tab标签,当鼠标移动到某标签时,触发对应的内容div显示.for(var ...
- jquery实现回车键触发事件
键盘事件有3: keydown,keypress,keyup,分别是按下,按着没上抬,上抬键盘 . 正确代码为: $(document).keyup(function(event){ if(event ...
- js简单自定义事件与主动触发事件
var events = { addHandler: function (element, eventType, handler) { if (element.addEventListener) { ...
- 原生js自动触发事件
熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为, ...
随机推荐
- iOS开发--底部按钮和应用图标显示未读消息
我们要实现的效果如下: 我们使用系统自带的,实际上,代码量很少,在我们要显示的按钮上,打上下面一句代码即可: self.tabBarItem.badgeValue = @"1"; ...
- C# 开发圆角控件(窗体)
最近在做卡片视图的程序,要求将控件做成带有圆角的效果,下面是我在网上查找的资料,经过测试,确定可以实现功能.其中方法三既适应于控件,也适应于窗体. 先上传效果图: 方法一: 增加命名空间:using ...
- Js中split()方法的正确使用
通过 js 获取 QueryString (location.search部分) 参数很常见,网上代码也满天飞.不过现在的框架,基本上都通过路由伪静态了,把以前的 QueryString 变成了pat ...
- mysql参数配置文件
(1)参数配置文件中的内容以键值对形式存在. (2)如何查看键值对?show variables like '%name%';或者查看information_schema库下的global_varia ...
- JSON语法2
把 JSON 文本转换为 JavaScript 对象 JSON 最常见的用法之一,是从 web 服务器上读取 JSON 数据(作为文件或作为 HttpRequest),将 JSON 数据转换为 Jav ...
- Cookie学习笔记
1.简介 1.什么是cookie:cookie是一种能够让网站服务器把少量数据(4kb左右)存储到客户端的硬盘或内存.并且读可以取出来的一种技术. 2.当你浏览某网站时,由web服务器放置于你硬盘上的 ...
- 数据仓库基础(二)ETL
本文转载自:http://www.cnblogs.com/evencao/archive/2013/06/14/3135529.html ETL在数据仓库中具有以下的几个特点: 数据流动具有周期性: ...
- Python中文件的读写操作的几种方法
对文件的操作,步骤为:打开一个文件-->读取/写入内容-->保存文件 文件读写的3中模式 # 1.w 写模式,它是不能读的,如果用w模式打开一个已经存在的文件,会清空以前的文件内容,重新写 ...
- MySQL数据库----存储过程
存储过程 存储过程包含了一系列可执行的sql语句,存储过程存放于MySQL中,通过调用它的名字可以执行其内部的一堆sql -- 存储过程的优点: -- 1.程序与数据实现解耦 -- 2.减少网络传输的 ...
- ACM题目————区间覆盖问题
题目描述 设x1 , x2,... , xn是实直线上的n个点.用固定长度的闭区间覆盖这n个点,至少需要多少个这样的固定长度闭区间?设计解此问题的有效算法,并证明算法的正确性.编程任务:对于给定的实直 ...