JQuery は、簡単な例を通じて、trigger() とtriggerHandler() の違いを比較します。-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JQuery は、簡単な例を通じて、trigger() とtriggerHandler() の違いを比較します。

巴扎黑

Jun 25, 2017 pm 01:31 PM

jquery比較する例単純合格

Web ページの特殊効果を作成する場合、シミュレーション操作、つまり手動操作をシミュレートする必要がある場合があります。このとき、JQueryの2つのシミュレーション操作メソッドtrigger()とtriggerHandler()を考えます。これら 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 つのボタンをクリックします。そのうちの 1 つは http://wanlimm.com ページを取得します。

次に、の間に JS コードを追加します。

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

ここで使用するトリガーメソッドは、ポップアップウィンドウの表示を 2 回更新します。 " と bbb" をそれぞれ入力し、フォーム動作を使用して http://wanlimm.com ページに自動的にジャンプします。

trigger をtriggerHandler に置き換えると、ポップアップウィンドウが 1 つだけになり、フォームの動作がブロックされ、http://wanlimm.com ページに自動的にジャンプしなくなります。

次に、次のように HTML コード内の青いフォームコードを削除し、CSS メソッドを JS コードに追加します。

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

ページを更新すると、2 つのポップアップの後、ボタン内のテキストが次のようになります。赤。ただし、トリガーがtriggerHandlerに変更された場合、ページを更新した後、ウィンドウは1回だけポップアップし、テキストは赤くなりません。

trigger とtriggerHandler の違いを要約すると、次のようになります。

1.triggerHandler() メソッドはイベントのデフォルトの動作をトリガーしませんが、trigger() はトリガーします。

2.triggerHandler() メソッドは最初に一致した要素にのみ影響しますが、.trigger() はすべての要素に影響します。

3. TriggerHandler() メソッドは、オブジェクトではなく、現在のイベント実行の戻り値を返すため、他のメソッドに接続できません。イベントトリガー要素が含まれています。

4. イベントの作成時にtriggerHandler()はバブルしません。 trigger() はバブルしますが、この種のバブルはカスタムイベントによってのみ反映されます。

以上がJQuery は、簡単な例を通じて、trigger() とtriggerHandler() の違いを比較します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

jquery实现多少秒后隐藏图片Apr 20, 2022 pm 05:33 PM

实现方法：1、用“$("img").delay(毫秒数).fadeOut()”语句，delay()设置延迟秒数；2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句，通过定时器来延迟。

axios与jquery的区别是什么Apr 20, 2022 pm 06:18 PM

区别：1、axios是一个异步请求框架，用于封装底层的XMLHttpRequest，而jquery是一个JavaScript库，只是顺便封装了dom操作；2、axios是基于承诺对象的，可以用承诺对象中的方法，而jquery不基于承诺对象。

jquery怎么修改min-height样式Apr 20, 2022 pm 12:19 PM

修改方法：1、用css()设置新样式，语法“$(元素).css("min-height","新值")”；2、用attr()，通过设置style属性来添加新样式，语法“$(元素).attr("style","min-height:新值")”。

jquery怎么在body中增加元素Apr 22, 2022 am 11:13 AM

增加元素的方法：1、用append()，语法“$("body").append(新元素)”，可向body内部的末尾处增加元素；2、用prepend()，语法“$("body").prepend(新元素)”，可向body内部的开始处增加元素。

jquery怎么删除div内所有子元素Apr 21, 2022 pm 07:08 PM

删除方法：1、用empty()，语法“$("div").empty();”，可删除所有子节点和内容；2、用children()和remove()，语法“$("div").children().remove();”，只删除子元素，不删除内容。

jquery中apply()方法怎么用Apr 24, 2022 pm 05:35 PM

在jquery中，apply()方法用于改变this指向，使用另一个对象替换当前对象，是应用某一对象的一个方法，语法为“apply(thisobj,[argarray])”；参数argarray表示的是以数组的形式进行传递。

jquery on()有几个参数Apr 21, 2022 am 11:29 AM

on()方法有4个参数：1、第一个参数不可省略，规定要从被选元素添加的一个或多个事件或命名空间；2、第二个参数可省略，规定元素的事件处理程序；3、第三个参数可省略，规定传递到函数的额外数据；4、第四个参数可省略，规定当事件发生时运行的函数。

jquery怎么去掉只读属性Apr 20, 2022 pm 07:55 PM

去掉方法：1、用“$(selector).removeAttr("readonly")”语句删除readonly属性；2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。