首頁 > 文章 > web前端 > JQuery透過簡單範例比較trigger()與triggerHandler()的差異

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

巴扎黑原創: 2017-06-25 13:31:341266瀏覽

在製作網頁特效時，我們有時會需要使用到模擬操作，即模擬人工手動操作。這時，我們會想到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頁面。

然後，在4ec11beb6c39d0703d1751d203c170532cacc6d41bbb37262a98f745aa00fbf0之間加入發下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中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：用法分享：jQuery如何使用自動觸發事件trigger下一篇：用法分享：jQuery如何使用自動觸發事件trigger

看更多