1. 程式人生 > >jquery的trigger()方法,自動觸發事件

jquery的trigger()方法,自動觸發事件

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",["我的自定義","事件"]); //傳遞兩個資料