jQuery的trigger和triggerHandler
一、trigger()方法触发被选元素的指定事件类型
$("button").click(function(){ $("input").trigger("select"); })
语法
$(selector).trigger(event,[param1,param2,....]);
参数
event 必需。规定指定元素要触发的事件。可以使用自定义事件(使用bind()函数来附加,或者任何标准事件);
[param1,param2,....] 可选。传递到事件处理程序的额外参数(对自定义事件特别有用)。
二、triggerHandler()语法和参数与trigger()相同,但是它们之间会有些区别。
1.trigger()会操作jQuery对象匹配的所有元素,而triggerHandler()只会影响匹配到的第一个元素。
<script> $(function(){ // 给按钮绑定click事件处理函数 $("input[type=button]").click(function(event){ alert($(this).attr("id")); }); // 选中的button集合中,只触发第一个button的click事件,只打印出1 $("input[type=button]").triggerHandler("click"); // 选中的button集合中,触发所有button的click,打印出1,2,3 $("input[type=button]").trigger("click"); }) </script> <body> <input type="button" id="1"> <input type="button" id="2"> <input type="button" id="3"> </body>
2.由triggerHandler()创建的事件不会在DOM树种冒泡;如果目标元素不直接处理它们,则不会发生任何事情。
<script> $(function(){ $("#outA").click(function(){ alert("A"); }); $("#outB").click(function(){ alert("B"); }); $("#outC").click(function(){ alert("C"); }); // 使用trigger,依次C、B、A $("#outC").trigger("click"); // 使用trigger,只会打印出C $("#outC").triggerHandler("click"); }); </script> <body> <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;"> <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;"> <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div> </div> </div> </body>
3.trigger会触发事件的默认行为,而triggerHandler则不会(如表单提交)。
4.triggerHandler的返回的是事件处理函数的返回值,而不是具有可链性的 jQuery 对象(trigger)。此外,如果没有处理程序被触发,则这个方法返回 undefined。
trigger源码:
trigger: function( type, data ) { //对每一个元素都调用jQuery.event.trigger return this.each(function() { jQuery.event.trigger( type, data, this ); }); }
triggerHandler源码
triggerHandler: function( type, data ) { var elem = this[0]; //只有第一个元素调用jQuery.event.trigger,同时第四个参数是true //表示只是会调用一次 if ( elem ) { return jQuery.event.trigger( type, data, elem, true ); } }
因为trigger调用了each方法,该方法虽然遍历了所有的调用对象然后执行指定的函数,但是他的返回值依然是调用对象!但是triggerHandler没有调用each方法,而是直接调用了第一个元素的事件,所以他的返回值就是jQuery.event.trigger的返回值!