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

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

、loadです。 unload ready

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

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

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

load()unload()event

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

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

codepen demo

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

キーボードイベント

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

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

keyupイベントオブジェクトのkeydown屬性を使用して、どのキーが押されているかを決定することをお?jiǎng)幛幛筏蓼?。これは、ブラウザがこの情?bào)を保存するために異なるプロパティを使用し、jQueryが

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

および<kbd>a</kbd>は個(gè)別に登録されています。以下のコードでは、ユーザーに<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など）を知りたい場(chǎng)合は、<kbd>Esc</kbd>を使用する必要があります。 keypress keypress次のコードスニペットは、キーを押したキーに基づいて要素を隠します。 keypress

codepen demo

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

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

、

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

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

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

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

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

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

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

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

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

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

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

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

mousemoveおよびhoverイベント

マウスポインターが要素內(nèi)を移動(dòng)すると、mousemoveイベントがトリガーされます。マウスが動(dòng)いている限り、ピクセルと同じくらい小さくてもトリガーされます。したがって、非常に短い時(shí)間で何百ものイベントをトリガーできます。ご想像のとおり、イベントハンドラーで複雑な操作を?qū)g行すると、ブラウザが遅れます。 mousemoveイベントハンドラーを可能な限り効率的にし、不要になった場(chǎng)合はバインドすることをお?jiǎng)幛幛筏蓼埂?

hoverマウスポインターが要素に入るか出発する場(chǎng)合にのみ無(wú)料。 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)滾動(dòng)足夠了！");
    // 更新警報(bào)框內(nèi)的文本。
  }
});

codepen demo handlerInOut

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

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

、

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

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

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

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

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

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

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

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

codepen demo

の変更

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

の代わりに

keypressイベントの詳細(xì)については、公式のjQueryドキュメントにアクセスできます。 jqueryでイベントを使用することに関する質(zhì)問(wèn)やヒントがある場(chǎng)合は、コメントを殘してください。 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)在の要素と將來(lái)セレクターに一致させるすべての要素に取り付けることです。ただし、

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

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

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

$(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)滾動(dòng)足夠了！");
    // 更新警報(bào)框內(nèi)的文本。
  }
});

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

$("#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;
  }
});