JQuery透過簡單範例比較trigger()與triggerHandler()的差異-js教程-PHP中文網

JQuery透過簡單範例比較trigger()與triggerHandler()的差異

巴扎黑

發布： 2017-06-25 13:31:34

原創

1312 人瀏覽過

在製作網頁特效時，我們有時會需要使用到模擬操作，即模擬人工手動操作。這時，我們會想到JQuery中的模擬操作方法trigger()和triggerHandler()這2個方法。這2個方法都能夠簡單實現模擬人工手動操作，那麼它們有什麼差別呢？下面，我們就透過一個簡單案例來介紹一下它們的差異，這個案例效果：刷新頁面，就會自動模擬點擊按鈕效果，彈出提示。

首先，新建一個頁面，在頁面中加入以下html程式碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
*{padding:0; margin:0;}
.hi{background:red;width:100px;height:100px; position:relative;}
</style>
<script type="text/javascript" src="/a/js/jquery-1.10.1.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="hi">
<form action="http://wanlimm.com" >
<input type="submit" value="aaa" />
<input type="submit" value="bbb" />
</form>
</div>
</body>
</html>

登入後複製

這段HTML程式碼的表單，有2個按鈕，它們的值分別是「aaa」和「bbb ”，現在點擊這2個按鈕中的任何一個，都會都得到http://wanlimm.com頁面。

然後，在之間加入發下JS 程式碼：

$(function(){
$(":submit").click(function(e){
alert($(this).val());
}).trigger(&#39;click&#39;);
});

登入後複製

這裡，我們用到的trigger方法，刷新這個頁面，會有2次彈跳窗，分別顯示“aaa”和“bbb”，然後會自動使用表單行為自動跳到http://wanlimm.com這個頁面。

如果把trigger換成triggerHandler ，就只會有1次彈跳窗，而且封鎖表單行為，不會自動跳到http://wanlimm.com頁面。

我們再把html程式碼中的標藍的form程式碼去掉，然後，再在JS程式碼中連綴方法CSS，如下：

$(function(){
$(":submit").click(function(e){
alert($(this).val());
}).trigger(&#39;click&#39;).css(&#39;color&#39;,&#39;red&#39;);
});

登入後複製

我們刷新頁面時，2次彈窗後，按鈕中的文字會變成紅色。但是，如果把 trigger 改成 triggerHandler 後，刷新頁面後，只會1次彈跳窗，而不會文字變紅。

綜上總結 trigger 與 triggerHandler 的差異：

1、triggerHandler()方法並不會觸發事件的預設行為，而trigger()會。

2、triggerHandler()方法只會影響第一個符合的元素，而.trigger()會影響所有。

3、triggerHandler()方法不能連綴其它方法，因為它傳回的是當前事件執行的回傳值，而不是物件；trigger()可以連綴其它方法，因為它傳回目前包含事件觸發元素的jQuery 物件。

4、triggerHandler()在創建事件的時候，不會冒泡。 trigger()會冒泡，但這種冒泡是自訂事件才能體現出來。

以上是JQuery透過簡單範例比較trigger()與triggerHandler()的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

JQuery透過簡單範例比較trigger()與triggerHandler()的差異