jQuery中如何觸發(fā)事件？【代碼演示】

在jQuery中，觸發(fā)事件有3種方式，第1種是調(diào)用事件方法，第2種是通過trigger()方法觸發(fā)事件，第3種是通過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)行為。下面我們通過代碼來演示。

<input type="text">
<script>
  $("input").on("focus", function() {
    $（this).val("你好嗎")；
  });
  $("input").triggerHandler("focus");   //觸發(fā)事件
</script>

在上述代碼中，第3~5行代碼為頁面中的input元素綁定焦點(diǎn)事件。第6行代碼觸發(fā)焦點(diǎn)事件。代碼執(zhí)行后，會(huì)發(fā)現(xiàn)input文本框沒有光標(biāo)閃爍，但第2行代碼也執(zhí)行了，文本框中的值變?yōu)椤澳愫脝帷薄６绻麑⒌?行的triggerHandler0方法換成focus0方法或者trigger0方法，則看到文本框中有光標(biāo)閃爍。像這個(gè)文本框中有光標(biāo)閃爍的現(xiàn)象，就是元素獲得焦點(diǎn)時(shí)會(huì)發(fā)生的默認(rèn)行為。由此可見，triggerHandler0方法不會(huì)執(zhí)行元素的默認(rèn)行為。