更新時(shí)間:2022-08-29 來(lái)源:黑馬程序員 瀏覽量:
在jQuery中,觸發(fā)事件有3種方式,第1種是調(diào)用事件方法,第2種是通過(guò)trigger()方法觸發(fā)事件,第3種是通過(guò)triggerHandler()方法觸發(fā)事件。下面我們分別進(jìn)行講解。
1.事件方法觸發(fā)事件
jQuery中的事件方法在調(diào)用時(shí)如果傳參數(shù),表示綁定事件,如果不傳參數(shù),表示觸發(fā)事件。以click()方法為例,示例代碼如下:
//綁定事件 $("div").click(function() { alert("hello"); }); //觸發(fā)事件 $("div").click();
上述代碼中,第6行代碼調(diào)用了click()方法,觸發(fā)了單擊事件。
2.trigger()方法觸發(fā)事件
使用migger()方法可以觸發(fā)指定事件,示例代碼如下。
//綁定事件 $("div").click(function() { alert("hello"); }); //觸發(fā)事件 $("div").trigger("click");
上述代碼中,第6行代碼調(diào)用了trigger()方法,參數(shù)click表示單擊事件。
3.triggerHandler()方法觸發(fā)事件
事件方法和trigger()方法在觸發(fā)事件時(shí),都會(huì)執(zhí)行元素的默認(rèn)行為,而triggerHandler()方法在觸發(fā)事件時(shí)不會(huì)執(zhí)行元素的默認(rèn)行為。下面我們通過(guò)代碼來(lái)演示。
<input type="text"> <script> $("input").on("focus", function() { $(this).val("你好嗎"); }); $("input").triggerHandler("focus"); //觸發(fā)事件 </script>
在上述代碼中,第3~5行代碼為頁(yè)面中的input元素綁定焦點(diǎn)事件。第6行代碼觸發(fā)焦點(diǎn)事件。代碼執(zhí)行后,會(huì)發(fā)現(xiàn)input文本框沒(méi)有光標(biāo)閃爍,但第2行代碼也執(zhí)行了,文本框中的值變?yōu)椤澳愫脝帷薄6绻麑⒌?行的triggerHandler0方法換成focus0方法或者trigger0方法,則看到文本框中有光標(biāo)閃爍。像這個(gè)文本框中有光標(biāo)閃爍的現(xiàn)象,就是元素獲得焦點(diǎn)時(shí)會(huì)發(fā)生的默認(rèn)行為。由此可見(jiàn),triggerHandler0方法不會(huì)執(zhí)行元素的默認(rèn)行為。