快捷導(dǎo)航

jQuery如何使用自動(dòng)觸發(fā)事件trigger

更新時(shí)間：2015年11月29日 10:02:37 作者：麥田

這篇文章主要介紹了jQuery如何使用自動(dòng)觸發(fā)事件trigger，需要的朋友可以參考下

有時(shí)候，需要通過(guò)模擬用戶操作，來(lái)達(dá)到點(diǎn)擊的效果，例如用戶進(jìn)入頁(yè)面后
就觸發(fā)click事件，而無(wú)需主動(dòng)點(diǎn)擊。

比如以下代碼：

<body>
  <a href="#" onclick="javascript:document.getElementById('d').innerHTML='x1'">點(diǎn)擊1</a>
  <a href="#" onclick="javascript:document.getElementById('d').innerHTML='x2'">點(diǎn)擊2</a>
  <a href="#" onclick="javascript:document.getElementById('d').innerHTML='x3'">點(diǎn)擊3</a>
  </br>
  <span id="d"></span>
</body>

實(shí)現(xiàn)效果為'點(diǎn)擊1'頁(yè)面上將顯示x1 ,'點(diǎn)擊2'頁(yè)面上顯示x2 …
但需要實(shí)現(xiàn)首次進(jìn)入頁(yè)面為默認(rèn)是'點(diǎn)擊1'

在jQuery中，可以使用trigger()方法完成模擬操作。
例如可以使用下面的代碼來(lái)觸發(fā)A鏈接的click事件。

$('a').first().trigger("click");

這樣當(dāng)頁(yè)面加載完畢后，觸發(fā)第一個(gè)A鏈接的click事件，頁(yè)面將顯示x1

觸發(fā)自定義事件

trigger()方法不僅能觸發(fā)瀏覽器支持的具有相同名稱的事件，也可以觸發(fā)自定義名稱的事件。
例如為元素綁定一個(gè)”myEvent”的事件,jQuery代碼如下：

$('#btn').bind("myEvent", function(){ 
  alert("自定義事件");
});

想要觸發(fā)這個(gè)事件,可以使用以下代碼來(lái)實(shí)現(xiàn)：

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

傳遞數(shù)據(jù)

trigger(type,[data])方法有兩個(gè)參數(shù)，
第1個(gè)是事件對(duì)象或者要觸發(fā)的事件類型,
第2個(gè)參數(shù)是傳遞給事件處理函數(shù)的附加參數(shù),以數(shù)組形式傳遞。通?？梢酝ㄟ^(guò)傳遞一個(gè)參數(shù)給
回調(diào)函數(shù)來(lái)區(qū)別這次事件是代碼觸發(fā)的還是用戶觸發(fā)的。

下面是一個(gè)傳遞數(shù)據(jù)的例子。

$('#btn').bind("myEvent", function(event,message1,message2){ 
  alert(message1 + "," + message2);
});
$('#btn').trigger("myEvent", ["Hello","World!"]);

以上就是jQuery自動(dòng)觸發(fā)事件trigger的使用方法，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery結(jié)合PHP+MySQL實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)下拉列表[實(shí)例]
二級(jí)聯(lián)動(dòng)的實(shí)現(xiàn)方法還真不少，實(shí)用性也很強(qiáng)，這里結(jié)合一個(gè)學(xué)生信息表的實(shí)例，來(lái)分享一下我的實(shí)現(xiàn)過(guò)程
2011-11-11
jQuery+php實(shí)時(shí)獲取及響應(yīng)文本框輸入內(nèi)容的方法
這篇文章主要介紹了jQuery+php實(shí)時(shí)獲取及響應(yīng)文本框輸入內(nèi)容的方法,涉及jQuery響應(yīng)鍵盤事件及ajax調(diào)用php文件針對(duì)輸入內(nèi)容的處理與回調(diào)相關(guān)技巧,非常簡(jiǎn)單易懂,需要的朋友可以參考下
2016-05-05
40款非常有用的 jQuery 插件推薦（系列一）
jQuery 是一個(gè)非常優(yōu)秀的 JavaScript 框架，在現(xiàn)在的 Web 開(kāi)發(fā)項(xiàng)目中扮演著重要角色。jQuery 使用簡(jiǎn)單靈活，同時(shí)還有許多成熟的插件可供選擇，它可以幫助你在項(xiàng)目中加入一些非常好的效果，讓網(wǎng)站有更好的可用性和用戶體驗(yàn)
2011-12-12
jquery實(shí)現(xiàn)百葉窗效果
本文主要分享了jquery實(shí)現(xiàn)百葉窗效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
jQuery-ui中自動(dòng)完成實(shí)現(xiàn)方法
關(guān)于jQuery-ui-1.8中的自動(dòng)完成控件，其匹配方式是使用正則表達(dá)式進(jìn)行匹配的。
2010-06-06
jQuery實(shí)現(xiàn)手風(fēng)琴小案例
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)手風(fēng)琴小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04
基于jquery實(shí)現(xiàn)彩色投票進(jìn)度條代碼解析
這篇文章主要介紹了基于jquery實(shí)現(xiàn)彩色投票進(jìn)度條代碼解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-08-08
jQuery中nextUntil()方法用法實(shí)例
這篇文章主要介紹了jQuery中nextUntil()方法用法,實(shí)例分析了nextUntil()方法的功能、定義及匹配同輩元素的技巧與注意事項(xiàng),需要的朋友可以參考下
2015-01-01
jQuery構(gòu)造函數(shù)init參數(shù)分析續(xù)
其實(shí)樓主的F和jQuery.fn.init是相等的; 實(shí)現(xiàn)功能是和jq一樣的, 只是jq的把構(gòu)造函數(shù)放進(jìn)原型;如果非要說(shuō)原因,個(gè)人理解jq這樣寫整體結(jié)構(gòu)清晰,先是入口構(gòu)造函數(shù),緊跟著是原型部分(原型里面init是初始化),但是不好理解;乍一看確實(shí)挺繞, 我也是看了好久才明白怎么回事
2015-05-05
JQuery中層次選擇器用法實(shí)例詳解
這篇文章主要介紹了JQuery中層次選擇器用法,以實(shí)例形式較為詳細(xì)的分析了jQuery中層次選擇器的各種常見(jiàn)使用技巧,并備有較為詳細(xì)的注釋說(shuō)明,需要的朋友可以參考下
2015-05-05