JQueryのイベントの包括的な見方

この記事は、Wern AnchetaとCamilo Reyesによってレビューされました。 SetePointのすべてのピアレビューアーズに感謝します。

jQueryは、Webページでほぼすべてのユーザーインタラクション動作をキャプチャし、イベントとして定義することができます。イベントの重要性は、ユーザーのアクションに基づいてそれに応じて応答できることです。たとえば、ボタンクリックまたはスクロールイベントに基づいて、Webページの背景色を変更するコードを記述できます。

jQueryには、さまざまなイベントを処理するためのcontextmenu()、hover()、keyup()などの多くの簡単な方法があります。専用の方法に加えて、jQueryは、ハンドラーをあらゆるイベントに添付できる一般的なonメソッドも提供します：on('eventName', handler)。これらの方法は、純粋なJavaScriptでハンドラーを追加できる標準DOMイベントのラッパーにすぎません。

このチュートリアルでは、これらすべてのイベントメソッド（5つの主要なカテゴリに分割されています）をすばやく見て、それらを使用する際のベストプラクティスについて説明します。

キーポイント

• JQueryイベントは、ユーザーのインタラクションをキャプチャし、レスポンシブでインタラクティブなWebアプリケーションを有効にします。イベントハンドラーを添付するには、.on()などの方法を使用します。
JQueryのブラウザイベントには、新しいバージョンの特定の特定のメソッドが非推奨になっている
• の使用を強調する、エラーの処理エラー、サイズ変更、スクロールが含まれます。 .on('eventName', handler)'
ドキュメントロードイベントにより、スクリプトがDOMの完全に準備ができている後にのみ実行されることが保証され、非初期化された要素に関連するエラーが回避されます。
• JQueryのキーボードとマウスのイベントは、キープレスからマウスの動きまで、
、
• 、keydown()、keyup()など、さまざまな相互作用を処理します。 click() mousemove()フォームイベントは、フォーム内のユーザー入力とインタラクションを処理します。JQueryは、フォーカス、変更、および提出物を効果的に管理するための専用イベントを提供します。
ブラウザイベント

このカテゴリには、3つのイベントが含まれています。画像などの要素が誤ってロードされている場合、

イベントがトリガーされます。そのショートカット方法は、jQueryバージョン1.8以降に廃止されているため、代わりに

を使用する必要があります。

errorresizeeventscroll errorこのイベントは、ブラウザウィンドウのサイズが変更されるたびにトリガーされます。さまざまなブラウザは、実装方法に従って異なる方法でon('error', handler)ハンドラーを呼び出すことができます。 Internet ExplorerとWebKitベースのブラウザは、イベントが終了した場合にのみ呼び出すのですが、Hightlyを継続的に呼び出します。

resize次のコードスニペットは、ウィンドウの幅に基づいて画像を交換します

。

resize resizeこのCodepenデモンストレーションは、イベントの実際の効果を示しています：

srccodepen demo

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

を表示します

scrollevent

要素は、ユーザーが特定の要素の異なる位置にスクロールするときにこのイベントをトリガーできます。 windowオブジェクトを除き、スクロールバーを備えた要素はこのイベントをトリガーできます。たとえば、overflow属性をscrollまたはスクロール可能なiframeに設定する要素は、このイベントをトリガーできます。

スクロール位置が変更されるたびにハンドラーが呼び出されることを忘れないでください。巻物の原因は関係ありません。矢印キーを押したり、スクロールバーをクリックまたはドラッグしたり、マウスホイールを使用したりすることでトリガーできます。以下のコードでは、ユーザーが500ピクセル以上下にスクロールして操作を実行するかどうかを確認します。

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

codepen demo

を表示します ドキュメント読み込みイベント

jQueryには3つの方法があり、ドキュメントまたはDOMのステータスに従ってトリガーされます。それらは

、

、loadです。 unload ready

を使用して、画像、スクリプト、iframe、

オブジェクトなどの外部リソースをロードする要素にハンドラーを接続できます。イベントは、接続する要素とそのすべての子供の要素が完全にロードされると発射されます。画像で使用すると、いくつかの問題が発生します。まず、DOMツリーを正しく泡立てません。 2番目の問題は、信頼性でもクロスブラウザーでもないことです。 load() windowユーザーがWebナビゲーションから離れると、

イベントがトリガーされます。これは、ユーザーがリンクをクリックしたり、アドレスバーに新しいURLを入力したり、ブラウザウィンドウを閉じたためかもしれません。ページリロードもこのイベントをトリガーします。

を使用してもunloadイベントはキャンセルされないことに注意してください。さらに、ほとんどのブラウザは、このイベントハンドラー内のpreventDefault()、unload、およびalert()への呼び出しを無視します。つまり、次のコードが機能しないことを意味します。 confirm() prompt()バージョン1.8以降、

と

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

の両方が非推奨されています。

load()unload()event

ほとんどの場合、すべての要素（画像など）を問題なく実行できるようになるまで完全にロードする必要はありません。確認する必要があるのは、DOM階層が完全に構築されていることです。 readyイベントはあなたのためにこれを処理します。このイベントに添付されたハンドラーは、DOMの準備ができた後にのみ実行されます。ハンドラーの内部では、jQueryコードを実行したり、イベントハンドラーを他の要素に添付したりできます。

下のCodepenデモでは、高解像度画像をロードします。画像が完全にロードされる前にDOMの準備ができていることに気付くでしょう。 ready

codepen demo

を表示します コードがいくつかのCSSスタイルのプロパティの値に依存している場合は、最初に実行する前に対応するスタイルシートまたは組み込みスタイルへの参照を提供する必要があります。

キーボードイベント

キーボードイベントは、ユーザーがキーボードとのやり取りによってトリガーできます。このような各イベントには、キープレスとイベントの種類に関する情報が含まれます。 jqueryには、

、keydown()、keyup()には3つのキーボードイベントショートカットがあります。 keypress()

およびkeyupイベントkeydown 名前が示唆するように、ユーザーがキーボードのキーをリリースすると、

がトリガーされます。両方のイベントのハンドラーは任意の要素に添付できますが、現在フォーカスのある要素上のハンドラーのみがトリガーされます。

keyupイベントオブジェクトのkeydown属性を使用して、どのキーが押されているかを決定することをお勧めします。これは、ブラウザがこの情報を保存するために異なるプロパティを使用し、jQueryが

属性を正規化してこの情報を確実に取得するためです。

which覚えておくべきもう一つのことは、2つのイベントがwhichと

を区別しないことです。後者の場合、

および<kbd>a</kbd>は個別に登録されています。以下のコードでは、ユーザーに<kbd>shift a</kbd>イベントを登録するアラートボックスを表示します。 <kbd>shift</kbd>キーが押されると、特定の要素がDOMから削除されます。 <kbd>a</kbd> keydown <kbd>y</kbd>

codepen demo

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

を表示します event

このイベントはkeypressイベントに似ています。主な違いの1つは、修飾子と非プリントキー（

、

などなど）がkeydownイベントをトリガーしないことです。特別なキー（矢印キーなど）をキャプチャするために<kbd>Shift</kbd>イベントを使用してはいけないと言うとき、あまり置くことはできません。入力したキャラクター（aやaなど）を知りたい場合は、<kbd>Esc</kbd>を使用する必要があります。 keypress keypress次のコードスニペットは、キーを押したキーに基づいて要素を隠します。 keypress

codepen demo

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

を表示します

マウスイベント マウスイベントは、ユーザーがポインティングデバイス（マウスなど）と対話するとトリガーされます。これらのイベントは、クリック（

、

、

など）に基づいているか、モバイル（

、click、dblclickなど）に基づいています。このセクションでは、これらすべてのイベントについて簡単に説明し、それらの間のわずかな違いを説明するためのいくつかのデモンストレーションを含めます。 contextmenu mouseenterクリックベースのイベントmouseleave mousemove jQueryは、5つのクリックベースのイベントメソッドを定義します。ユーザーが要素のマウスボタンをそれぞれ押してリリースすると、

および

イベント（名前から見ることができます）は、発射されます。一方、マウスボタンが指定された要素に押し付けられ、その後リリースされた場合にのみ、

イベントがトリガーされます。

dblclickわずかに複雑です。イベントをdblclickとして登録するには、システム関連のカウント間隔が期限切れになる前に2回のマウスクリックが必要です。ダブルクリックによってトリガーされたイベントはブラウザ固有であるため、ハンドラーを単一の要素の両方のclickとdblclickの両方に添付しないでください。一部のブラウザは、ダブルクリックする前に2つのシングルクリックイベントを登録する場合がありますが、他のブラウザはダブルクリックする前に1つのシングルクリックイベントのみを登録する場合があります。

contextmenuイベントは、要素を右クリックした後、コンテキストメニューが表示される前にトリガーされます。つまり、イベントハンドラーで対応するコードを使用して、デフォルトのコンテキストメニューが表示されないようにすることができます。

次のコードスニペットにより、デフォルトのコンテキストメニューが右クリック時に表示されないようにしますが、代わりにカスタムメニューが表示されます。

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

このデモは、画像をクリックするときに画像にCSSスタイルを適用し、カスタムコンテキストメニューを持っています。

codepen demo

を表示します モバイルベースのイベント

いくつかのイベントは、マウスポインターの移動、要素の入力、削除に基づいています。 6つのモバイルベースのイベントメソッドがあります。

および

イベントから始めましょう。名前が示すように、マウスポインターが要素に入ると、両方のイベントが発射されます。同様に、マウスポインターが要素を離れると、mouseoverおよびmouseenterイベントが発生します。 mouseleave mouseout

と

の1つの違いは、マウスポインターがバインドする要素の外側に移動する場合にのみ、前者が発射されることです。一方、要素の子孫の外の動きでさえ、mouseleaveはトリガーされます。 mouseoutとmouseoutの間にはまったく同じ違いがあります。 mouseenter mouseover

codepen demo

を表示します マウスの動きに基づいてイベントがどのように変化するかを見てみましょう

および

。右から大きな青いボックスを入力してから停止してから右にピンク色の箱に入ります。 mouseenterおよびmouseoverは、両方とも1の値を持っている必要があります。左に移動してピンクのボックスを入力すると、mouseenterカウントが2に変更されます。これは、mouseoverのイベントが泡立っているために起こります。ピンクのボックスのmouseoverイベントは、外側の青いボックスに「バブル」し、mouseoverイベントのカウントを1より増加させます。 mouseoverイベントは、さらに左に移動し、2つのピンク色のボックスの間を停止すると再び発砲します。ブルーボックスの左端に到達すると、mouseoverイベントのカウントは5で、mouseoverイベントのカウントはまだ1になります。 mouseover mouseenterまったく同じ推論を使用して、イベントのカウントを説明するために使用できます。さまざまな方向に移動してみて、カウントがどのように変化するかを確認してください。

mousemoveおよびhoverイベント

マウスポインターが要素内を移動すると、mousemoveイベントがトリガーされます。マウスが動いている限り、ピクセルと同じくらい小さくてもトリガーされます。したがって、非常に短い時間で何百ものイベントをトリガーできます。ご想像のとおり、イベントハンドラーで複雑な操作を実行すると、ブラウザが遅れます。 mousemoveイベントハンドラーを可能な限り効率的にし、不要になった場合はバインドすることをお勧めします。

hoverマウスポインターが要素に入るか出発する場合にのみ無料。 hoverメソッドを呼び出す方法は2つあります。最初のものは次のとおりです

ここで、マウスポインターが要素に入ると、マウスポインターが要素を離れるときに

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

が実行されます。 2番目の方法は次のとおりです

handlerIn()今回は、要素を入力して出発するときに同じhandlerOut()関数が実行されます。

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

codepen demo handlerInOut

を表示します

注：このデモでは、CSSフィルター効果を使用しますが、これはサポートしていません。 フォームイベント

フォームはインターネット上のどこにでもあります。ほぼすべてのユーザーが、ある時点でフォームに記入します。 jQueryには、フォームイベントを処理する特別な方法があります。これらのイベントは、値が変化したり、焦点を失ったりしたときに発射できます。合計7つのフォームイベントがあり、1つずつ説明します。

、

、

、

、blur eventsfocus focusin要素が焦点を獲得するたびに、focusoutイベントがトリガーされます。フォーム要素とアンカータグでのみ機能します。他の要素に焦点を合わせてトリガーするには、要素の

属性を設定する必要があります。 Internet Explorerでは、隠された要素に焦点を当てるとエラーが発生する可能性があることを忘れないでください。フォーカスを明示的に設定せずに

イベントをトリガーする必要がある場合は、focusメソッドを呼び出すことができます。 tabindex focus要素が焦点を失うたびに、triggerHandler("focus")イベントがトリガーされます。古いブラウザでは、このイベントはフォーム要素にのみ適用されます。

blurイベントとは異なり、要素またはその子孫が焦点を獲得するたびに

がトリガーされます。同様に、要素やその子孫が焦点を失うたびに

がトリガーされます。したがって、イベントをバブルアップしたい場合は、両方のイベントを使用する必要があります。 focus focusinfocusout、

、

イベントselect change要素の値が変更されると、submitイベントがトリガーされます。このイベントは、

、

、およびchange要素にのみ適用されます。チェックボックス、ラジオボタン、および選択ボックスの場合、このイベントはユーザーが選択した直後にトリガーされます。他の要素では、要素が焦点を失った後にのみ発射されます。また、JavaScriptを使用して入力要素の値を変更した場合、このイベントはトリガーされないことに注意してください。 <input>

ユーザーが要素内でテキスト選択を行うと、selectイベントがトリガーされます。このイベントの範囲はより限られており、<input>および<textarea></textarea>要素にのみ適用できます。選択したテキストを取得する場合は、クロスブラウザーjQueryプラグインを使用する必要があります。

ユーザーがフォームを送信しようとすると、submitイベントがトリガーされます。ハンドラーを添付してフォーム要素のみを添付できます。このイベントをトリガーするには、ユーザーは<button></button>、<input type="submit">、または<input type="image">要素をクリックする必要があります。興味深いことに、javascriptsubmitイベントはインターネットエクスプローラーで泡立ちません。ただし、この動作は、jQueryバージョン1.4以降、ブラウザで標準化されています。

codepen demo

を表示します JQuery 3

の変更

jQueryバージョン1.8以来、

、load、errorメソッドは非推奨です。 unloadメソッドは本質的に不明です。この方法は、AJAXがロードまたは実際に発射されたイベントを意味する場合があります。同様に、load()メソッドもloadメソッドと混同される場合があります。 JQuery 3では、これらの方法がついに削除されました。これで、これらのイベントリスナーを登録するには、errorメソッドを使用する必要があります。 jQuery.error() on最終的な考え

この記事では、すべてのメインJQueryイベントメソッドと同様のイベントの違いについて説明しました。

の代わりに

を使用するタイミングを知ることは、手間を避け、貴重な時間を節約するのに役立ちます。純粋なJavaScriptを使用してDOMイベントに接続することは可能ですが、jQueryは、Webサイト/アプリケーションがサポートする必要があるブラウザーに応じて、バックグラウンドのクロスブラウザーの違いの正規化があります。

keypressイベントの詳細については、公式のjQueryドキュメントにアクセスできます。 jqueryでイベントを使用することに関する質問やヒントがある場合は、コメントを残してください。 keydown JQueryイベントのFAQ（FAQ）

jQueryのイベントを泡立たせないようにする方法は？

jqueryでは、

メソッドを使用して、イベントがDOMツリーの上向きに泡立つのを防ぐことができます。この方法は、イベントが親要素に伝播するのを防ぎます。デフォルトの動作が発生するのを防ぐことができないことに注意してください。使用方法の例は次のとおりです。

メソッドと

メソッドの違いは何ですか？ event.stopPropagation() イベントハンドラーを要素に接続するために、

jQueryの

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

および

メソッドが使用されます。それらの主な違いは、.bind()はハンドラーを現在の要素にのみ取り付けるのに対し、.live()はハンドラーを現在の要素と将来セレクターに一致させるすべての要素に取り付けることです。ただし、

メソッドはjQuery 1.7以降に廃止され、jquery 1.9で削除されていることは注目に値します。代わりに

メソッドを使用する必要があります。 .bind()

jqueryでプログラムでイベントをトリガーする方法は？

.trigger()メソッドを使用して、jQueryでプログラムでイベントをトリガーできます。この方法により、要素上の指定されたイベントを手動でトリガーできます。例は次のとおりです。

$(window).resize(function() {
  var windowWidth = $(window).width();
  if (windowWidth < 768) {
    $("img").attr("src", "image-src-here.jpg");
    // 此处更改图像src。
  }
});

jQueryのイベント代表は何ですか？なぜそれが役立つのですか？

JQueryのイベント代表団は、イベントハンドラーを個々の要素にバインドするのではなく、イベントの処理を親要素に委任する手法です。これは、イベントハンドラーを必要とする多数の要素がある場合、または要素をDOMに動的に追加する場合に特に便利です。バインドする必要があるイベントハンドラーの数を減らすことにより、パフォーマンスを向上させます。

jQueryでのイベントのデフォルト操作をブロックする方法は？

メソッドを使用して、jqueryのイベントのデフォルト操作をブロックできます。この方法は、イベントのデフォルト操作が発生するのを防ぎます。たとえば、リンクがURLに従うのを防ぐことができます。 event.preventDefault()

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已经滚动足够了！");
    // 更新警报框内的文本。
  }
});

jQueryの

と.click()の違いは何ですか？ .on('click')

jQueryの

メソッドは、.click()の略語です。どちらの方法で、選択した要素にクリックイベントハンドラーを添付します。ただし、動的に追加された要素のイベントを処理し、複数のイベントを一度に処理できるため、.on('click')メソッドはより大きな柔軟性を提供します。 .on()

jQueryのダブルクリックイベントを検出する方法は？

メソッドを使用して、jqueryのダブルクリックイベントを検出できます。このメソッドは、選択した要素でダブルクリックイベントが発生したときに実行される関数を添付します。例は次のとおりです。.dblclick()

$(window).unload(function() {
  alert("请不要离开！"); // 不起作用。
});

jQueryの要素に複数のイベントをバインドする方法は？

メソッドを使用して、jQueryの要素に複数のイベントをバインドできます。この方法を使用すると、選択した要素に複数のイベントハンドラーを添付できます。例は次のとおりです。.on()

$("#alert").keydown(function(event) {
  switch (event.which) {
    case 89: // y的键码
      $("#element").remove(); // 从DOM中删除元素
      break;
  }
});

jQueryでイベントハンドラーをバインドする方法は？

メソッドを使用して、jqueryのイベントハンドラーを解除できます。この方法では、.off()を使用して接続されたイベントハンドラーを削除します。例は次のとおりです。.on()

$("body").keypress(function(event) {
  switch (event.keyCode) {
    case 75:
      // 75在keypress事件中代表大写K
      $(".K").css("display", "none");
      break;
  }
});

jQueryの右クリックイベントを検出する方法は？

メソッドを使用するか、.contextmenu()イベントのイベントオブジェクトのプロパティを確認して、jqueryの右クリックイベントを検出できます。右クリックの「どの」プロパティは3になります。例は次のとおりです。mousedown

以上がJQueryのイベントの包括的な見方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。