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只有响应和冒泡