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

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

、loadです。 unload ready

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

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

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已經(jīng)滾動足夠了！");
    // 更新警報框內的文本。
  }
});

load()unload()event

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

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

codepen demo

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

キーボードイベント

、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>

$(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("您已經(jīng)滾動足夠了！");
    // 更新警報框內的文本。
  }
});

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

、

、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。
  }
});

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

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

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

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

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

。右から大きな青いボックスを入力してから停止してから右にピンク色の箱に入ります。 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。
  }
});

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

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已經(jīng)滾動足夠了！");
    // 更新警報框內的文本。
  }
});

codepen demo handlerInOut

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

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

、

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

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

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

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

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

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

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

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

codepen demo

の変更

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

の代わりに

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

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

jqueryでは、

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

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

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

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

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

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

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

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

$(window).scroll(function() {
  if ($(window).scrollTop() >= 500) {
    $("#alert").text("您已經(jīng)滾動足夠了！");
    // 更新警報框內的文本。
  }
});

$(window).unload(function() {
  alert("請不要離開！"); // 不起作用。
});

$("#alert").keydown(function(event) {
  switch (event.which) {
    case 89: // y的鍵碼
      $("#element").remove(); // 從DOM中刪除元素
      break;
  }
});

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