JQuery 自動觸發事件

經常使用模擬

有時候,須要經過模擬用戶操做,來達到單擊的效果。例如在用戶進入頁面後,就觸發click事件,而不須要用戶去主動單擊。數組

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

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

這樣,當頁面加載完畢後,就會馬上輸出想要的效果。也能夠直接簡寫click(),來達到一樣的效果:app

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

觸發自定義事件

trigger()方法不只能觸發瀏覽器支持的具備相同名稱的事件,也能夠觸發自定義名稱的事件。例如爲元素綁定一個「myClick」的事件,JQuery代碼以下:函數

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

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

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

傳遞數據

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

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

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

執行默認操做

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

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

以上代碼不只會觸發爲<input>元素綁定的focus事件,也會使<input>元素自己獲得焦點(這是瀏覽器的默認操做)。回調函數

若是隻想觸發綁定的focus事件,而不想執行瀏覽器默認操做,可使用jQuery中另外一個相似的方法——triggerHandler()方法。io

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

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

相關文章
相關標籤/搜索