jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析

本文通过具体实例，详细解析jQuery事件模型中默认行为的执行顺序，并深入对比trigger()与triggerHandler()两个方法的异同，供开发者参考学习。

前言

近期开发中遇到一个现象：使用jQuery触发事件时，默认行为与绑定事件的执行顺序并不固定，有时先执行默认行为，有时则相反。经查阅资料发现，国外开发者也遇到过类似问题，特此整理笔记分享。

默认行为执行顺序

通常浏览器执行事件的顺序是：先执行默认行为，再执行绑定行为。但在jQuery中，部分场景下顺序会反转，即先执行绑定行为，后执行默认行为。关键在于明确这种反转发生的具体条件。

参考以下代码示例进行说明：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jQuery Trigger and Default Behavior Demo</title>
 
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
 
// When the DOM is ready, initialize.
$(function(){
  $( "input" ).click(
    function( objEvent ){
      // Alert the checkboxed status.
      alert( this.checked );
    }
  );
   
  $( "button" ).click(
    function( objEvent ){
      // Trigger click on the checkbox.
      $( "input" ).click();
    }
  );
});
</script>
</head>
<body>
 
<h1>
jQuery Trigger and Default Behavior Demo
</h1>
 
<form>
<input type="checkbox" />
<button>click checkbox</button>
</form>
 
</body>
</html>

页面包含input和button两个元素，均绑定了click事件。直接点击input时，alert显示true，表明input的默认行为发生在绑定click事件之前；而点击button时，alert显示false，说明此时input的默认行为发生在绑定click事件之后。

仔细分析差异可知，当通过jQuery的 $(selector) .click( ) 或 $(selector).trigger('click') 方法触发selector元素的click事件时，默认行为的执行会被推迟到绑定click事件之后。

若需确保任何情况下默认行为均在绑定click事件之前执行，应如何处理？

最简单的方案是在触发input元素的click事件前，手动设置checkbox的 checked 属性，随后通过 triggerHandler() 方法触发click事件（此方式不触发浏览器默认行为）。具体代码如下：

$( "input" ).click(
  function( objEvent ){
  // Alert the checkboxed status.
  alert( this.checked );
  }
);
$( "button" ).click(
  function( objEvent ){
  // Toggle checkbox checked status.
  $( "input" )[ 0 ].checked = !$( "input" )[ 0 ].checked;
  // Trigger ONLY click event hanlders on the checkbox.
  $( "input" ).triggerHandler( "click" );
  }
);

jQuery中 trigger( ) 与 triggerHandler( ) 区别

共同点：

1. 两者均可触发通过jQuery绑定的事件处理函数，例如使用 .on()/.bind()/.click(function(){ }) 等方式注册的事件；

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

不同点：

1. triggerHandler(‘event') 不会触发原生元素对象上的 .event() 方法（此类事件称为native event），而 trigger(‘event') 会触发；浏览器的默认行为实际上就是执行了原生元素对象上的 .event() 方法。

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

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

4. .triggerHandler() 的返回值可以是任意值，若未明确return则返回 undefined；而 .trigger() 始终返回jQuery对象。因此，使用.triggerHandler()时需自行实现链式调用。

使用 trigger( )与triggerHandler( )注意事项

曾使用 trigger('click') 触发点击事件，发现鼠标位置未变，即鼠标焦点未发生转移。测试表明，trigger()与triggerHandler()触发事件时均不改变鼠标焦点，因此通过 trigger('click') 方式触发点击事件与用户实际执行点击动作存在差异。

感兴趣的朋友可使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun 测试上述代码运行效果。

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

希望本文所述对大家jQuery程序设计有所帮助。