JQ中 trigger()和triggerHandler()区别

既然使用了trigger和triggerHandler,那么你应该了解了他们的差别了。

trigger():在每一个匹配的元素上触发某类事件。

triggerHandler():这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。

看似两个非常相似,但是表同里不同!

下面就是他们之间的三大区别:

  第一:trigger会导致浏览器同名的默认行为的执行,如:trigger(‘submit‘);不但会执行submit()函数的效果,也会执行表单提交的效果;

     而triggerHandler就不会导致默认行为的执行

  第二:triggerHandler只会触发JQ对象集合中第一个元素的事件处理函数,也不会产生事件冒泡。而trigger不同

  第三:这个方法的返回时事件处理函数的返回值,而不是具有可链性的JQ对象,此外,如果最开始的JQ对象集合为空,则返回undefined.

  特别是第二条,关于这个bug的 ticket。关于这个问题的 commit。jQuery自己实现了一个event对象用于解决浏览器间的差异问题。可是由于有mouseenter/mouseleave等非标准事件的存在,jQuery引入了special事件的子系统,让原生事件回到模拟事件的事件列队中,可是这个系统并不能解决所有问题,当使用trigger.focus时,IE下会错误地执行两次回调。

  triggerHandler是对trigger产生这种问题的解决方法。但是使用triggerHandler时你会发现input是没有光标focus效果的。

  

解决方法

  除了用triggerHandler另一个方法是在focus绑定事件中加上event.preventDefault()。

  可是你发现这不符合我们的期望呀,因为focus事件回调执行了,但是连个focus效果都没有。

最终解决方法

  既然是jQuery封装的关系,那我们用原生的事件就可以了。看演示,左边是用原生事件触发的,右边用triggerHandler。

  $(‘input‘)[0].focus();

  

时间: 2024-08-30 02:16:23

JQ中 trigger()和triggerHandler()区别的相关文章

jquery中的trigger和triggerHandler区别

我们在jQuery基础教程之如何注册以及触发自定义事件这篇文章中,有用到今天要讲的trigger方法.今天我们来简单看看jquery中的trigger何triggerHandler方法的区别:trigger( event, [data] )在每一个匹配的元素上触发某类事件.这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器提交表单.如果要阻止这种默认行为,应返回false.你也可以触发由bind()注册的自定义事件 $("p&q

one、bind、unbind、live、delegate、on、trigger、triggerHandler区别

one:为每一个匹配元素的特定事件绑定一个一次性的事件处理函数,这个事件处理函数只会被执行一次,其他的规则与bind()相同,这个事件函数会接受到一个事件对象,可以通过他来阻止浏览器默认行为,如果想取消默认的行为,又想阻止事件冒泡,这个事件处理函数必须返回false. 若要删除one()绑定的事件,请使用unbind()或是off()函数. bind:为每个匹配元素的特定事件绑定事件处理函数.jquery3.0已弃用此方法,用on()代替. unbind:移除被选元素的事件处理程序.jquery

jquery的trigger和triggerHandler的区别示例介绍

triggerHandler() 方法触发被选元素的指定事件类型.但不会执行浏览器默认动作,也不会产生事件冒泡. triggerHandler() 方法与 trigger() 方法类似.不同的是它不会触发事件(比如表单提交)的默认行为,而且只影响第一个匹配元素. 与 trigger() 方法相比的不同之处 它不会引起事件(比如表单提交)的默认行为 .trigger() 会操作 jQuery 对象匹配的所有元素,而 .triggerHandler() 只影响第一个匹配元素. 由 .triggerH

JQ中bind(),live(),delegate()事件方法的区别

[导读] bind(), live(), 和 delegate()这三个方法的区别并不是非常明显.弄清楚这些区别对我们写出简介的代码和预防我们的应用中出现bugs是非常有帮助的. jQuery团队在1 7版本中发布了一个用于绑定事件的新方法叫 bind(), .live(), 和 .delegate()这三个方法的区别并不是非常明显.弄清楚这些区别对我们写出简介的代码和预防我们的应用中出现bugs是非常有帮助的. jQuery团队在1.7版本中发布了一个用于绑定事件的新方法叫做on.这个方法包含

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

jq中ajax的使用

jq中ajax必须在服务器环境下使用 $.ajax({ url:"json.json", //请求的url地址 dataType:"json", //返回格式为json type:"GET", //请求方式 beforeSend:function(){ $('#div3').html('加载中...') }, success:function(data,status){//第一个参数包含获取的内容,第二个参数为执行的状态 var tt="

redis中save和bgsave区别

转自:redis中save和bgsave区别 SAVE 和 BGSAVE 两个命令都会调用 rdbSave 函数,但它们调用的方式各有不同: SAVE 直接调用 rdbSave ,阻塞 Redis 主进程,直到保存完成为止.在主进程阻塞期间,服务器不能处理客户端的任何请求. BGSAVE 则 fork 出一个子进程,子进程负责调用 rdbSave ,并在保存完成之后向主进程发送信号,通知保存已完成. Redis 服务器在BGSAVE 执行期间仍然可以继续处理客户端的请求.

JQ中的clone()方法与DOM中的cloneNode()方法

JQ中的clone()方法与DOM中的cloneNode()方法 cloneNode()定义和用法 cloneNode()方法创建节点的拷贝,并返回该副本. 语法: node.cloneNode(deep);  其接收一个可选参数"deep",为布尔类型,默认是false. 当设置为true,克隆当前节点,属性及当前节点的后代.若设置为false,仅仅克隆当前元素节点本身. 扩展:  使用cloneNode()方法,当被克隆的节点绑定了事件处理程序,事件处理程序是否会被一同克隆,这个我

java中ArrayList 、LinkList区别

转自:http://blog.csdn.net/wuchuanpingstone/article/details/6678653 个人建议:以下这篇文章,是从例子说明的方式,解释ArrayList.LinkedList,但是最好的方式还是看源代码.其实ArrayList就是一个动态数组,LinkedList是一个链表.  1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构.     2.对于随机访问get和set,ArrayList优于LinkedLis