JQuery透過簡單範例比較trigger()與triggerHandler()的差異
在製作網頁特效時，我們有時會需要使用到模擬操作，即模擬人工手動操作。這時，我們會想到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('click');
});這裡，我們用到的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('click').css('color','red');
});我們刷新頁面時，2次彈窗後，按鈕中的文字會變成紅色。但是，如果把 trigger 改成 triggerHandler 後，刷新頁面後，只會1次彈跳窗，而不會文字變紅。
綜上總結 trigger 與 triggerHandler 的差異：
1、triggerHandler()方法並不會觸發事件的預設行為，而trigger()會。
2、triggerHandler()方法只會影響第一個符合的元素，而.trigger()會影響所有。
3、triggerHandler()方法不能連綴其它方法，因為它傳回的是當前事件執行的回傳值，而不是物件；trigger()可以連綴其它方法，因為它傳回目前包含事件觸發元素的jQuery 物件。
4、triggerHandler()在創建事件的時候，不會冒泡。 trigger()會冒泡，但這種冒泡是自訂事件才能體現出來。
以上是JQuery透過簡單範例比較trigger()與triggerHandler()的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
小米14 Pro怎麼開啟nfc功能？
Mar 19, 2024 pm 02:28 PM
現今手機的效能和功能越來越強大，幾乎所有手機都配備了便利的NFC功能，方便用戶進行行動支付和身分認證。然而，有些小米14Pro的用戶可能不清楚如何啟用NFC功能。接下來，讓我詳細向大家介紹一下。小米14Pro怎麼開啟nfc功能？步驟一：打開手機的設定選單。步驟二：找到並點選「連接和分享」或「無線和網路」選項。步驟三：在連接和共享或無線和網路選單中，找到並點擊「NFC和付款」。步驟四：找到並點選「NFC開關」。一般情況下，預設是關閉的狀態。步驟五：在NFC開關頁面上，點選開關按鈕，將其切換為開啟狀
iPhone 16 Pro CAD 圖曝光 加入第二個新按鍵
Mar 09, 2024 pm 09:07 PM
iPhone16Pro的CAD檔案已經曝光，設計與先前的傳聞一致。去年秋天，iPhone15Pro新增了Action按鈕，而今年秋天，Apple似乎計劃對這款硬體的尺寸進行微小的調整。加入Capture按鈕據傳言，iPhone16Pro可能會新增第二個新按鈕，這將是繼去年之後連續第二年增加新按鈕。傳聞指出新的Capture按鈕將被設定在iPhone16Pro的右下側，這項設計可望讓相機控制更加便捷，同時也能讓Action按鈕用於其他功能。這個按鈕將不再只是一個普通的快門按鈕。關於相機，從目前iP
華為 Pocket2怎麼隔空刷抖音？
Mar 18, 2024 pm 03:00 PM
隔空滑動螢幕是華為的一項功能，在華為mate60系列中可以說是備受好評，這個功能是通過利用手機上的激光感應器和前置攝像頭的3D深感攝像頭，來完成一系列不需要觸碰螢幕的功能，比如說隔空刷抖音，但華為Pocket2該要怎麼隔空刷抖音呢？華為Pocket2怎麼隔空截圖？ 1.開啟華為Pocket2的設定2、然後選擇【輔助功能】。 3.點選打開【智慧感知】。 4.打開【隔空滑動螢幕】、【隔空截圖】、【隔空按壓】開關就可以了。 5.使用的時候，需要再距離螢幕20~40CM處，張開手掌，待螢幕上出現手掌圖標，
WPS Word怎麼設定行距讓文件更工整
Mar 20, 2024 pm 04:30 PM
WPS是我們常用的辦公室軟體，在進行長篇文章的編輯時，常常會因為字體太小而看不清楚，所以會對字體和整個文件進行調整。例如：把文件進行行距的調整，會讓整個文件變得非常清晰，我建議各位小夥伴們都要學會這個操作步驟，今天就分享給大家，具體的操作步驟如下，快來看一看！開啟要調整的WPS文字文件，在【開始】選單中找到段落設定工具欄，你會看到行距設定小圖示（如圖中紅色線圈所示）。 2.點選行距設定右下角的小倒三角形，會出現對應的行距數值，可以選擇1～3倍行距（如圖箭頭所示）。 3.或者點選滑鼠右鍵點擊段落，就會出
Oracle DECODE函數詳解及用法範例
Mar 08, 2024 pm 03:51 PM
Oracle中的DECODE函數是一種條件式，常用於在查詢語句中根據不同的條件傳回不同的結果。本文將詳細介紹DECODE函數的語法、用法和範例程式碼。一、DECODE函數語法DECODE(expr,search1,result1[,search2,result2,...,default])expr：要進行比較的表達式或欄位。 search1,
Go語言的縮排規範及範例
Mar 22, 2024 pm 09:33 PM
Go语言的缩进规范及示例Go语言是一种由Google开发的编程语言，它以简洁、清晰的语法著称，其中缩进规范在代码的可读性和美观性方面起着至关重要的作用。本文将介绍Go语言的缩进规范，并通过具体的代码示例进行详细说明。缩进规范在Go语言中，缩进使用制表符（tab）而非空格。每级缩进为一个制表符，通常设置为4个空格的宽度。这样的规范统一了代码风格，使得团队合作编
TrendX 研究院：Merlin Chain 計畫分析及生態盤點
Mar 24, 2024 am 09:01 AM
根據3月2日數據統計，比特幣二層網路MerlinChain總TVL已達30億美元。其中比特幣生態資產佔比達90.83%，包括價值15.96億美元的BTC以及4.04億美元的BRC-20資產等。上一個月，MerlinChain在開啟質押活動14天內，其TVL總額就已經達到了19.7億美元，超過了去年11月份上線也是最近同樣引人注目的Blast。 2月26日，MerlinChain生態內的NFT總價值超過了4.2億美元，成為除以太坊以外NFT市值最高的公鏈項目。項目簡介MerlinChain是OKX支
C語言與PHP的區別及比較分析
Mar 20, 2024 am 08:54 AM
C語言與PHP的差異及比較分析C語言和PHP都是常見的程式語言，但它們在許多方面有著明顯的差異。本文將對C語言和PHP進行比較分析，並透過具體的程式碼範例來說明它們之間的差異。一、語法和用途：C語言：C語言是一種過程導向的程式語言，主要用於系統級程式設計和嵌入式開發。 C語言的語法相對較為簡潔和底層，能夠直接操作內存，具有高效性和靈活性。 C語言強調程式設計師對程式的完全
