1. 程式人生 > >使用jQuery中trigger()方法自動觸發事件

使用jQuery中trigger()方法自動觸發事件

一、常用事件

在頁面載入完成時  自動觸發input的點選事件,在移動端可以實現自動彈出輸入法,獲得焦點

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

還有一種簡寫方式:

$("input").click();

還有其它事件就不一一列出了。

二、自定義事件

$("#btn").on("myClick",function(){
   alert("自定義事件");
});

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

三、傳遞引數

trigger(tpye[,datea])方法有兩個引數,第一個引數是要觸發的事件型別,第二個單數是要傳遞給事件處理函式的附加資料,以陣列形式傳遞。通常可以通過傳遞一個引數給回撥函式來區別這次事件是程式碼觸發的還是使用者觸發的。

$("#btn").bind("myClick", function (event, message1, message2) { //獲取資料
    $("#test").append("p" + message1 + message2 + "</p>");
});
$("#btn").trigger("myClick",["我的自定義","事件"]); //傳遞兩個資料

$(“#btn”).trigger(“myClick”,["我的自定義","事件"]); //傳遞兩個資料

四、執行預設操作

triger()方法觸發事件後,會執行瀏覽器預設操作。例如:

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

以上程式碼不僅會觸發為input元素繫結的focus事件,也會使input元素本身得到焦點(瀏覽器預設操作)。

如果只想觸發繫結的focus事件,而不想執行瀏覽器預設操作,可以使用jQuery中另一個類似的方法-triggerHandler()方法。

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

該方法會觸發input元素上繫結的特定事件,同時取消瀏覽器對此事件的預設操作,即文字框指觸發繫結的focus事件,不會得到焦點。

教程參考地址:http://blog.csdn.net/lijunling2008live/article/details/7457396

經常使用模擬

有時候,須要通過模擬使用者操作,來達到單擊的效果。比如在使用者進入頁面後,就觸發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事件,不會得到焦點。