既然使用了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();

  

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

  1. 【jQuery】【转】jQuery中的trigger和triggerHandler区别

    trigger(event, [data]) 在每一个匹配的元素上触发某类事件. 这个函数也会导致浏览器同名的默认行为的执行.比如,如果用trigger()触发一个'submit',则同样会导致浏览器 ...

  2. jquery的trigger和triggerHandler区别

    网上关于这个问题都是抄来抄去的,都没怎么说清楚.所以自己做了个测试,供大家参考指教.首先先看API怎么说的 为了检验一下,编写了一个简单的测试代码,如下: <html lang="en ...

  3. jQuery中的trigger和triggerhandler区别

    $("form :input").blur(function(){ // }).keyup(function(){ $(this).triggerHandler("blu ...

  4. JQ中mouseover和mouseenter的区别

    我最近也在学习JQuery,所以最近对JQ中的一些小问题进行总结,方便学习. 在对于刚开始学习JQ的初学者来说,mouseover事件和mouseenter事件总是傻傻分不清楚,毕竟刚开始学习的时候, ...

  5. JQ中$(window).load和$(document).ready区别与执行顺序

    JQ中的$(document).ready()大家应该用的非常多,等同于$(function(){}),基本每个JS脚本中都有这个函数的出现有时甚至会出现多个,那么另一个加载函数$(window).l ...

  6. [转]JQ中$(window).load和$(document).ready区别与执行顺序

    一.$(window).load().window.onload=function(){}和$(document).ready()方法的区别 1.$(window).load() 和window.on ...

  7. jq中append()、prepend()、after()、before()的区别

    jq中append().prepend().after().before()的区别详解 .append() - 在被选元素的结尾插入内容(内容的结尾,比如说有个a标签,则是在</a>这个标 ...

  8. JS模式:jq中简单的模式--》采摘自js设计(tomxu_version)

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  9. trigger和triggerHandler的使用

    今天琢磨了好久这个trigger和triggerHandler的用法.在网上搜了好多,不过大都是相互抄袭,毛意思都没有.后来自己做了研究. trigger: 1.可以用来触发事件. <input ...

随机推荐

  1. 单片机TM4C123学习(七):I2C模块(温度传感器)

    I2C(Inter Intergrated Circuit)总线是Philips公司推出的一种用于IC器件之间连接的二线制串行扩展总线,它通过两根信号线(SDA-串行数据线:SCL-串行时钟线)在连接 ...

  2. Base64编码通过URL传值的问题

    base64 编码中使用了 +号,+号通过URL传递时会变成空格,因为编码的方式的问题前台使用:Ext.encode(title_text.getValue().replace(/\+/g, '%2B ...

  3. [vb.net]最简单的邮件发送

    Imports Microsoft.Office.Interop.Outlook Private Sub sendMail() Dim outObj As New Application Dim it ...

  4. Android开源框架——Picasso

    开篇——介绍Picasso (Picasso是什么?)Picasso:A Powerfull Image Downloading and Caching Library for Android,即An ...

  5. Meta标签以及viewport

    meta是meta 标签用于网页的<head>与</head>中,meta 标签的用处很多.meta 的属性有两种:name和http-equiv. name属性主要作用:对应 ...

  6. Element should have been select but was input

    Element should have been select but was input-----看起来像下拉框,但实际不是下拉框的元素内容操作方法如下两名,先点击这个input,再单点要选择的值, ...

  7. nginx实现访问网站或目录密码认证保护

    添加目录登陆认证 location / { auth_basic "提示"; auth_basic_user_file /usr/conf/htpasswd; } auth_bas ...

  8. .NET Core竟然无法在Mac下进行build

    KRuntime 改为 XRE 之后(详见从 KRE 到 XRE :ASP.NET 5 中正在消失的那些K),昨天在 mac 用 git 签出 XRE 的代码库,直接执行其中的 build 命令 sh ...

  9. 使用gdb调试Python进程

    使用gdb调试Python进程 有时我们会想调试一个正在运行的Python进程,或者一个Python进程的coredump.例如现在遇到一个mod_wsgi的进程僵死了,不接受请求,想看看究竟是运行到 ...

  10. eclipse导入Android项目后,项目的名称变为了主Activity的名称

    不要使用File -> Import -> Android -> Existing Android Code into Workspace,而是用 File -> Import ...