jQuery 中的trigger和triggerHandler区别

Max_Mac原创，转载请注明出处。

jQuery 中的trigger和triggerHandler区别：

triggerHandler：

* 第一，他不会触发浏览器默认事件。（jQuery 1.4.4中文文档中说不会产生事件冒泡，可是我在chrome浏览器中使用jQuery 1.6.2会产生事件冒泡）

* 第二，只触发jQuery对象集合中第一个元素的事件处理函数。

* 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。

来看个例子：

<button id="old">.trigger("click")</button>
<button id="new">.triggerHandler("click")</button><br/>
<input type="text" value="To Be Focused" />
<script>
$("#old").click(function(){
  var trigger=$("input").trigger("click");
  alert(trigger);
});
$("#new").click(function(){
  var triggerHandler=$("#nput").triggerHandler("click");
  alert(triggerHandler);
});
$("#input").click(function(){
  $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
  return "ok";
});
$("body").click(function(){
  alert(123);
});
</script>

思考问题一：事件处理函数、默认事件处理函数和冒泡的执行顺序？

事件处理函数—》冒泡—》默认事件处理函数

思考问题二：click #new按钮后先执行alert(triggerHandler)还是$("<span>Focused!</span>").appendTo("body").fadeOut(1000)？

显然是先执行$("<span>Focused!</span>").appendTo("body").fadeOut(1000)，因为要先获得返回值"ok"，才会alert

思考问题三： click #old按钮后分别alert了"123","[object]",'"123"，而click #new按钮后分别alert了"ok",'"123"，这说明了什么？

可参考DOM2事件模型，trigger经历了事件传播、响应和冒泡，trigger只有响应和冒泡