经常使用模拟

有时候,须要通过模拟用户操作,来达到单击的效果。比如在用户进入页面后,就触发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 自己主动触发事件的更多相关文章

  1. 主动触发事件 自定义事件 trigger 及其用法

    1. 触发自定义事件方式 js.jq 2. jq 触发 2.1 默认支持的事件 $('#h').on('click',function(){ $(this).append('<p>p< ...

  2. js和jquery中的触发事件

    改别人的坑,遇到jquery选择器和fireEvent混用,不认识fireEvent方法报错. js的方法不能使用jquery的选择器去调用. 1.fireEvent (IE上的js方法 ) 我们来看 ...

  3. js jq 主动触发事件

    js的自定义事件与触发 //主动触发事件:触发鼠标被按下事件 var btn2 =document.getElementById("btn2"); var btn = docume ...

  4. jquery的实时触发事件(textarea实时获取中文个数)

    jquery的实时触发事件(textarea实时获取中文个数) (2014-09-16 11:49:50) 转载▼ 标签: 实时触发事件 中文个数 onpropertychange oninput o ...

  5. jQuery-1.9.1源码分析系列(十) 事件系统——主动触发事件和模拟冒泡处理

    发现一个小点,先前没有注意的 stopPropagation: function() { var e = this.originalEvent; ... if ( e.stopPropagation ...

  6. 选项卡切换:自动定时&主动触发事件

    最初学习的是手动触发事件,添加的是onmouseover,其中index是关键,tab标签与现实内容的div索引一一对应,遍历tab标签,当鼠标移动到某标签时,触发对应的内容div显示.for(var ...

  7. jquery实现回车键触发事件

    键盘事件有3: keydown,keypress,keyup,分别是按下,按着没上抬,上抬键盘 . 正确代码为: $(document).keyup(function(event){ if(event ...

  8. js简单自定义事件与主动触发事件

    var events = { addHandler: function (element, eventType, handler) { if (element.addEventListener) { ...

  9. 原生js自动触发事件

    熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为, ...

随机推荐

  1. linux文件系统软链接硬链接

    引子 目前,UNIX的文件系统有很多种实现,例如UFS(基于BSD的UNIX文件系统).ext3.ext4.ZFS和Reiserfs等等. 不论哪一种文件系统,总是需要存储数据.硬盘的最小存储单位是扇 ...

  2. React组件,React和生命周期

    笔记,具体可以看看这个博客: https://segmentfault.com/a/1190000004168886?utm_source=tag-newest react 的jsx document ...

  3. 护眼:我的DIY电脑护眼妙招

    每天对着电脑,埋头敲代码,一段时间之后.总是觉得眼睛很涩很难受,所以找到一些对抗的视疲劳的方法.不用花费任何钱,可以让眼睛享受地看着我们的屏幕,方法很简单,过来看看(小伎俩,大牛勿笑~) 一.WIN7 ...

  4. spring mvc interceptors

    <mvc:interceptors> <mvc:interceptor> <mvc:mapping path="/**"/> <mvc:e ...

  5. Python入门学习之路,怎么 “开心,高效,踏实” 地把Python学好?兴趣,兴趣,兴趣!

    Python入门学习之路,怎么 “开心,高效,踏实” 地把Python学好?兴趣,兴趣,兴趣!找到你自己感兴趣的点进行切入,并找到兴趣点进行自我驱动是最好的学习方式!       推荐两本书,一本作为 ...

  6. Django框架----ORM数据库操作

    一.ORM介绍 ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的说,ORM是通过使用 ...

  7. 删除github上个人的repositories的操作步骤

  8. 关于sqlite使用场景

    对于sqlite,实际中从来没有用过,也几乎没有考虑过其使用场景,更不要说专门去研究它了,今天看最新的数据库流行度排行榜的时候,发现sqlite的长期趋势好像一直在第十位左右徘徊,特地搜索了下其使用场 ...

  9. Python之CMDB资产管理系统

    最近正好在给公司做CMDB资产管理系统,现在做的也差不多了,现在回头吧思路整理下. CMDB介绍 CMDB --Configuration Management Database 配置管理数据库, C ...

  10. 第八篇:支持向量机 (SVM)分类器原理分析与基本应用

    前言 支持向量机,也即SVM,号称分类算法,甚至机器学习界老大哥.其理论优美,发展相对完善,是非常受到推崇的算法. 本文将讲解的SVM基于一种最流行的实现 - 序列最小优化,也即SMO. 另外还将讲解 ...