JQuery 自動觸發事件

jopen 10年前發布 | 15K 次閱讀 jQuery Ajax框架

常用模擬

有時候,需要通過模擬用戶操作,來達到單擊的效果。例如在用戶進入頁面后,就觸發click事件,而不需要用戶去主動單擊。

在JQuery中,可以使用trigger()方法完成模擬操作。例如可以使用下面的代碼來觸發id為btn的按鈕的click事件。

$('#btn').trigger("click");

這樣,當頁面加載完畢后,就會立刻輸出想要的效果。也可以直接簡寫click(),來達到同樣的效果:

$('#btn').click();

觸發自定義事件

trigger()方法不僅能觸發瀏覽器支持的具有相同名稱的事件,也可以觸發自定義名稱的事件。例如為元素綁定一個“myClick”的事件,JQuery代碼如下:

$('#btn').bind("myClick", function(){ 
    $('#test').append("<p>我的自定義事件.</p>");
});

想要觸發這個事件,可以使用以下代碼來實現:

$('#btn').trigger("myClick");

傳遞數據

trigger(type[,data])方法有兩個參數,第1個參數是要觸發的事件類型,第2個參數是要傳遞給事件處理函數的附加數據,以數組形式傳遞。通常可以通過傳遞一個參數給回調函數來區別這次事件是代碼觸發的還是用戶觸發的。

下面是一個傳遞數據的例子。

$(function(){
    $('#btn').bind("myClick", function(event, message1, message2){
        $('#test').append( "<p>"+message1 + message2 +"</p>");
    });
    $('#btn').click(function(){
        $(this).trigger("myClick",["我的自定義","事件"]);
    }).trigger("myClick",["我的自定義","事件"]);
})

執行默認操作

trigger()方法觸發事件后,會執行瀏覽器默認操作。例如:

$("input").trigger("focus");

以上代碼不僅會觸發為<input>元素綁定的focus事件,也會使<input>元素本身得到焦點(這是瀏覽器的默認操作)。

如果只想觸發綁定的focus事件,而不想執行瀏覽器默認操作,可以使用jQuery中另一個類似的方法——triggerHandler()方法。

$("input").triggerHandler("focus");

該方法會觸發<input>元素上綁定的特定事件,同時取消瀏覽器對此事件的默認操作,即文本框只觸發綁定的focus事件,不會得到焦點。

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!