jQuery_jqueryのdom要素にバインドされたイベントの詳細説明

テクノロジーマニアの職業的本能として、技術製品の機能を見ると、それがどのように実装されているのか疑問に思わずにはいられません。たとえば、他の人の Web サイトでクールなインターフェイスやクールな機能を見るたびに、ブラウザ コンソールを開かずにはいられません。 。 。

さて、あまり深くは考えずに、Web サイト上の要素にバインドされたイベント関数のコードを表示したい場合に何をすべきかについて話しましょう。

ネイティブにバインドされたイベント関数コードを表示します

いわゆるネイティブとは、addEventListener メソッドを通じて dom 要素にバインドすることです。これは簡単です:

イベントにバインドされた要素を検査します (要素を右クリック -> 要素を検査) ポップアップ要素ビューのコンソールで、右側の [イベント リスナー] タブをクリックすると、すべての要素が表示されます。イベントが発生したら、その要素をクリックしてハンドラーを見つけ、マウスを右クリックして「関数定義の表示」メニューを選択します。要素にバインドされているイベント関数のソース コードの場所にジャンプできます。写真と真実があります:

jquery によってバインドされたイベント関数コードを表示します

そうですね、問題が発生しましたね? jquery にバインドされているすべてのイベント関数については、上記のメソッドを通じて jquery コードにジャンプし、常にその場所にあります。見ることは見ないことと同じです。そこで、Bao 兄弟が jquery の表示方法を教えるためにここにいます。

要素を検査するには、[プロパティ] ビューをクリックします。最初のものを選択して展開し、「jQueryxxxxx (数字の文字列)」のような属性を見つけて、その値 (通常は数字) を覚えておきます N

次に、左側のコンソール ビューに切り替えて、コンソールで $.cache[N] を実行します。ここで、N は前の属性値

です。

すると、この要素にバインドされているものが出てきます。イベントを展開すると、表示したい実際の機能が表示されます。特定のイベントの下のハンドルの後の関数... を右クリックし、[関数定義の表示] を選択して表示します。

例=》http://demo.sudodev.cn/frontend/jqDetectjquery2.x バージョンにバインドされたイベント関数コードを表示します

わかりました、また問題に遭遇したようですね。 jquery2.x バージョンの jquery を使用すると、2.x のコード構造が変更されたため、上記の方法は機能しなくなります。実際、2.x バージョンのイベントは引き続きキャッシュ メカニズムを使用しますが、1.x バージョンのように外部に公開されるのではなく、カプセル化され、クロージャ オブジェクト data_priv および圧縮バージョンに存在します。通常は jquery が使用されるため、この data_priv 名を表示することはできません。そこで、jquery2.x バージョンのソース コードをチェックした後、Brother Bao がそれを見つける方法を教えます。

コンソールに直接移動し、jQuery を含むオブジェクトを構築して、コンソールに jQuery を表示します。たとえば、「var o={j:$}」と入力します。この利点は、実行後にコントロール バーに jQuery

のすべてのプロパティを表示できることです。

次に、コンソールで jQuery (ここでは j) オブジェクトを展開し、_queueHooks メソッドを見つけて、そのコードがおそらく "return L.get(a,c)||L.access..." であることを確認します。この L に住むことは、L かもしれないし、そうでないかもしれない)

j の下の第 1 レベルのオブジェクト (上の _queueHooks など) を展開し、[Expand] を見つけて、下の [Closure] を展開し、前にある「L」カプレットを見つけて、その後ろの文字を右クリックして、[Store as Global Variable] を選択します。 ”

次に、キャッシュを含む tempX オブジェクトがコンソールに表示されます。それを temp1 と呼ぶことにします。その temp1 には、キャッシュ オブジェクトを直接取得できる get メソッドがあります。 clickMe というイベントにバインドされたオブジェクトの ID を表示するとします。次に、temp1.get($('#clickMe').get(0)) (または temp1.get(document.querySelector('#clickMe')))) を実行すると、

上の jquery1.x バージョンと同等のものが出力されます。

次の例は、上記の jquery1.x メソッドと同じです=》http://demo.sudodev.cn/frontend/jq2Detect別の例:

上記の操作はデフォルトで Chrome ブラウザーで実行されますが、実際、技術者なら 1 つの例から推測できるはずです。 IE については、うーん...言わなかったことにしてください。 :)

更新:

1. 属性をチェックする手間を省くために、jquery1.x は最初に要素の jQueryxxxxxxx 属性の値をチェックする代わりに、コンソール上で $.cache[$('#clickMe').get(0)[$.expando]] を直接実行して要素にバインドされているものを出力できます。 🎜>

2. 記事のレビューとテストの後。現在最も省力化され、jquery1 と jquery2 に適用できる新しいメソッドがあり、コンソールに

を直接入力して、要素にバインドされているすべてを出力します。しかし、jquery2のソースコードのコメントから、$._dataは将来のバージョンで廃止されることが分かりました。したがって、上で紹介した方法は依然として非常に価値があります。人に魚の釣り方を教えるよりも、魚の釣り方を教える方が良いです :) $._data($('#clickMe').get(0))