首頁 > web前端 > js教程 > 主體

JQuery 模擬點擊事件,自動觸發事件

小云云
發布: 2017-11-17 11:51:16
原創
38918 人瀏覽過

有時候,需要透過模擬使用者操作,來達到點擊的效果。例如使用者進入頁面後,就觸發click事件,而不需要使用者去主動點擊。在JQuery中,可以使用trigger()方法完成模擬操作。例如可以使用下面的程式碼來觸發id為btn的按鈕的click事件。本篇文章我們就為大家解釋JQuery 模擬點擊事件,自動觸發事件。

 $('#btn').trigger("click");
登入後複製

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

$('#btn').click();
登入後複製

觸發自訂事件

trigger()方法不僅能觸發瀏覽器支援的具有相同名稱的事件,也可以觸發自訂名稱的事件。例如為元素綁定一個「myClick」的事件,JQuery程式碼如下:

  $('#btn').bind("myClick", function(){      
 $(&#39;#test&#39;).append("<p>我的自定义事件.</p>");      
 });
登入後複製

想要觸發這個事件,可以使用以下程式碼來實作:

$(&#39;#btn&#39;).trigger("myClick");
登入後複製

傳遞資料

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

下面是一個傳遞資料的範例。

$(function(){      
$(&#39;#btn&#39;).bind("myClick", function(event, message1, message2){      
$(&#39;#test&#39;).append( "<p>"+message1 + message2 +"</p>");      
 });      
 $(&#39;#btn&#39;).click(function(){      
 $(this).trigger("myClick",["我的自定义","事件"]);      
}).trigger("myClick",["我的自定义","事件"]);      
 })
登入後複製

執行預設操作

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

 $("input").trigger("focus");
登入後複製

以上程式碼不僅會觸發為元素綁定的focus事件,也會讓元素本身得到焦點(這是瀏覽器的預設操作)。

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

$("input").triggerHandler("focus");
登入後複製

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

本篇文章主要介紹了JQuery 模擬點擊事件,自動觸發事件,希望對大家有幫助。

相關推薦:

js模擬點選事件

#js模擬點選事件實作程式碼_javascript技巧

#Javascript 模擬點選事件(點選連結與html點選) 相容IE/Firefox_javascript技巧

以上是JQuery 模擬點擊事件,自動觸發事件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板