本文介绍了jQuery事件模型的默认行为执行顺序以及trigger()和triggerHandler()的比较。分享给大家，供大家参考，详情如下：

前言：

最近在工作中做需求的时候发现了一个奇怪的事情。使用jQuery触发事件时，并不总是先执行默认行为，然后再执行绑定的事件行为。有时可能是相反的顺序。于是我就上网查资料，居然有一个外国朋友遇到了和我一样的问题！先整理一下笔记吧～～

默认行为执行顺序

一般来说，浏览器执行事件的顺序是：先执行默认行为，再执行绑定行为。
然而，jquery 中有时会出现相反的顺序。首先执行绑定的行为，然后执行默认的行为。
那么这里所说的“有时”到底是什么呢？

看下面的代码示例：

 




 

jQuery触发器和默认行为演示

 


单击复选框

 

说明：页面中有两个元素，一个是input元素，一个是button元素，分别绑定了点击事件。当直接点击input元素时，alert结果为true，input的默认行为发生在绑定的点击事件之前；当单击按钮元素时，警报结果变为 false，输入的默认行为是在绑定单击事件之前。在点击事件之后发生；

仔细体验一下区别，发现当调用JQuery的 $(selector) .click( ) 或 $(selector).trigger('click') 触发选择器时元素的单击事件发生时，默认行为将在绑定的单击事件之后发生。

那么，如果我们希望在任何情况下都在绑定单击事件之前发生默认行为怎么办？

最简单的方式是在触发输入元素的点击事件之前手动设置复选框的checked属性，然后通过triggerHandler()触发点击事件（无需触发浏览器默认行为）。代码如下：

$(“输入”).click(
  函数（objEvent）{
  //提醒复选框的状态。
  警报（这个。检查）；
  }
）；
$(“按钮”).click(
  函数（objEvent）{
  // 切换复选框选中状态。
  $( "输入" )[ 0 ].checked = !$( "输入" )[ 0 ].checked;
  // 仅触发复选框上的单击事件处理程序。
  $( "输入" ).triggerHandler( "点击" );
  }
);

jQuery中trigger( )和triggerHandler( )的区别

他们的共同点：

1. 可以触发通过jquery绑定的事件处理函数，比如.on()/.bind()/.click(function(){ })这些方法；

2. 可以触发原生元素对象上on{eventType}绑定的事件处理函数；

差异：

1. triggerHandler('event')不会触发原生元素对象上的.event()方法（这种事件称为原生事件），而trigger( '事件') 将会;
   浏览器的默认行为实际上是在原生元素对象上执行 .event() 方法！ ！ ！

2. .triggerHandler()只会在第一个匹配元素上触发事件，而trigger()会在所有匹配元素上触发事件；

3. .triggerHandler()触发的事件不会冒泡，但trigger()会冒泡；

4. .triggerHandler()的返回值可以是任意值。如果没有明确的返回值，那就是undefined，.trigger()将始终返回jQuery对象。因此，使用.triggerHandler()时，链式调用必须自己实现。

使用trigger()和triggerHandler()的注意事项

有一次我使用trigger('click')触发点击事件时，鼠标位置没有改变，也就是说鼠标焦点没有改变。经过测试，我发现trigger()和triggerHandler()在触发事件时不会改变鼠标焦点，所以trigger('click')触发点击事件的方式还是和用户一样的实际执行点击操作。是不同的。

有兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://www.lztongyong.com/code/HtmlJsRun来测试以上代码运行效果。

对更多jQuery相关内容感兴趣的读者可以查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》和《jquery选择器用法总结》

希望这篇文章对大家在jQuery编程方面有所帮助。