trigger() 方法触发被选元素上指定的事件以及事件的默认行为(比如表单提交)。
该方法与triggerHandler() 方法类似,不同的是 triggerHandler() 不触发事件的默认行为。
与 方法相比triggerHandler() 的不同之处:
- 它不会引起事件(比如表单提交)的默认行为
- .trigger() 会操作 jQuery 对象匹配的所有元素,而 .triggerHandler() 只影响第一个匹配元素。
- 由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡;如果目标元素不直接处理它们,则不会发生任何事情。
triggerHandler()与trigger() 方法的对比
<body>
<button id="old">.trigger( "focus" )</button>
<button id="new">.triggerHandler( "focus" )</button><br><br>
<p>执行 .trigger 后 input 输入框自动获取焦点,触发事件的默认行为,而 .triggerHandler 仅仅
执行了指定的事件浏览器并未执行动作,输入框也没有获取焦点。</p>
<input type="text" value="将获取焦点">
<script>
$( "#old" ).click(function() {
$( "input" ).trigger( "focus" );
});
$( "#new" ).click(function() {
$( "input" ).triggerHandler( "focus" );
});
$( "input" ).focus(function() {
$( "<span>获取焦点!</span>" ).appendTo( "body" ).fadeOut( 1000 );
});
</script>
</body>
触发事件模拟click:
$("button[name='comQue']").each(function(index,item){
$(this).trigger("click");
)}
触发 <input> 元素的 select 事件:
$("button").click(function(){
$("input").trigger("select");
});
传递参数
trigger(tpye[,datea])方法有两个参数,第一个参数是要触发的事件类型,第二个单数是要传递给事件处理函数的附加数据,以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。
$("#btn").bind("myClick", function (event, message1, message2) { //获取数据
$("#test").append("p" + message1 + message2 + "</p>");
});
$("#btn").trigger("myClick",["我的自定义","事件"]); //传递两个数据