8

jQuery、addEventListener、またはHTML属性(onload = "myFunc()"など)を使用してバインドされているかどうかにかかわらず、DOMがイベントハンドラーを追跡する方法を理解しようとしています。

jQueryが.data()メソッドを使用してjQueryによってバインドされたイベントハンドラーを格納することを読みました...しかし、他のものはどうですか?彼らはどこに行きますか?Webkitのインスペクターツールが[要素]タブの要素を検査することでイベントリスナーを表示することは知っていますが、その情報はどこで取得されますか?

ちなみに、ChromeのWebインスペクターを使用した一部のテストでは、コンソールを使用して、タグをプルすることでライブサイトのjQueryのバージョンを新しいバージョンに置き換え、変数と変数<script>をオーバーライドしました。明らかに、新しい.data()インターフェースがプロセスに導入されたため、置換前にjQueryを使用してバインドされたイベントは失われました。jQuery$

ただし、「失われた」ハンドラーは、イベントが発生したときに実際に呼び出されるため、特定のイベントにバインドされたままになります。それらを完全に削除したい場合、または自分のハンドラーで置き換えたい場合はどうでしょうか。これが、DOMが保持している場所で実際のハンドラーにアクセスする方法を知りたい理由です...そしてjQueryなしで。

4

1 に答える 1

10

のようなメソッドに関してaddEventListenerは、通常の JavaScript コードでは直接表示されません。それらは内部に保存されます。


インライン ハンドラーに関しては、典型的なハンドラーのように、単純に DOM 要素に直接格納されるため、次のようになります。

<a href="#" onclick='alert("foo");'>click</a>

効果的にこれになります:

a_element.onclick = function(event) { alert("foo"); };

event(古い IE には、関数にパラメーターが含まれていません。)


jQueryに関しては、それらがに保存されている.data()、またはより正確にjQuery.cache

ただし、ハンドラーが要素に直接割り当てられることはありません。jQuery は、決して目にすることのない単一のジェネリック ハンドラー(addEventListenerまたはを使用してattachEvent、利用可能なものは何でも)を割り当てます。イベントが発生するとevent.type、 を調べてから、要素.data()を調べてそのタイプのハンドラがあるかどうかを確認し、ある場合はそれらを呼び出します。


したがって、上書きしているスクリプトがある場合はjQuery.cache、それらのハンドラーを事実上孤立させたことになります。ハンドラーへの参照がない限り、バインドされたハンドラーを削除することはできませんaddEventListener。jQuery のジェネリック ハンドラも に格納されてjQuery.cacheいたため、要素自体を破棄しない限りバインドを解除する方法はありません。

jQuery.cache汎用ハンドラーが参照を持っているのか、それともそのサブセットを持っているのかは特に覚えていません。それが保持する参照は、漏れのあるデータの量に影響を与えます。

于 2012-10-05T22:54:30.537 に答える