JQuery 自動觸發事件
阿新 • • 發佈:2018-01-05
event 模擬 ber ont 另一個 附加 btn 觸發 相同
常用模擬
有時候,需要通過模擬用戶操作,來達到單擊的效果。例如在用戶進入頁面後,就觸發click事件,而不需要用戶去主動單擊。
在JQuery中,可以使用trigger()方法完成模擬操作。例如可以使用下面的代碼來觸發id為btn的按鈕的click事件。
1 |
$( ‘#btn‘ ).trigger( "click" ); |
這樣,當頁面加載完畢後,就會立刻輸出想要的效果。也可以直接簡寫click(),來達到同樣的效果:
1 |
$( ‘#btn‘ ).click(); |
觸發自定義事件
trigger()方法不僅能觸發瀏覽器支持的具有相同名稱的事件,也可以觸發自定義名稱的事件。例如為元素綁定一個“myClick”的事件,JQuery代碼如下:
1 |
$( ‘#btn‘ ).bind( "myClick" , function (){ |
2 |
$( ‘#test‘ ).append( "<p>我的自定義事件.</p>" ); |
3 |
}); |
想要觸發這個事件,可以使用以下代碼來實現:
1 |
$( ‘#btn‘ ).trigger( "myClick" ); |
傳遞數據
trigger(type[,data])方法有兩個參數,第1個參數是要觸發的事件類型,第2個參數是要傳遞給事件處理函數的附加數據,以數組形式傳遞。通常可以通過傳遞一個參數給回調函數來區別這次事件是代碼觸發的還是用戶觸發的。
下面是一個傳遞數據的例子。
1 |
$( function (){ |
2 |
$( ‘#btn‘ ).bind( "myClick" , function (event, message1, message2){ |
3 |
$( ‘#test‘ ).append( "<p>" +message1 + message2 + "</p>" ); |
4 |
}); |
5 |
$( ‘#btn‘ ).click( function (){ |
6 |
$( this ).trigger( "myClick" ,[ "我的自定義" , "事件" ]); |
7 |
}).trigger( "myClick" ,[ "我的自定義" , "事件" ]); |
8 |
}) |
執行默認操作
trigger()方法觸發事件後,會執行瀏覽器默認操作。例如:
1 |
$( "input" ).trigger( "focus" ); |
以上代碼不僅會觸發為<input>元素綁定的focus事件,也會使<input>元素本身得到焦點(這是瀏覽器的默認操作)。
如果只想觸發綁定的focus事件,而不想執行瀏覽器默認操作,可以使用jQuery中另一個類似的方法——triggerHandler()方法。
1 |
$( "input" ).triggerHandler( "focus" ); |
該方法會觸發<input>元素上綁定的特定事件,同時取消瀏覽器對此事件的默認操作,即文本框只觸發綁定的focus事件,不會得到焦點。
JQuery 自動觸發事件