JQuery 自己主動觸發事件
阿新 • • 發佈：2017-05-30
ack 用戶操作 頁面 -m jquer 默認 app 傳遞數據 就會
經常使用模擬
有時候，須要通過模擬用戶操作，來達到單擊的效果。比如在用戶進入頁面後，就觸發click事件，而不須要用戶去主動單擊。
在JQuery中。能夠使用trigger()方法完畢模擬操作。比如能夠使用以下的代碼來觸發id為btn的button的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 自己主動觸發事件