動的にアタッチされるイベント・リスナーが存在するかどうかを確認するには?
動的にアタッチされたイベント・リスナーの存在をチェックすることは可能でしょうか?あるいは、DOMの"onclick"(?)プロパティの状態をチェックする方法はありますか?Stack Overflowのようにインターネットを検索してみましたが、解決策は見つかりませんでした。以下は私のhtmlです:
<a id="link1" onclick="linkclick(event)"> link 1 </a>
<a id="link2"> link 2 </a> <!-- without inline onclick handler -->
そして、Javascriptで動的に作成したイベントリスナーを2番目のリンクにアタッチします:
document.getElementById('link2').addEventListener('click', linkclick, false);
コードはうまく実行されますが、このリスナーを検出しようとすると、すべて失敗します:
// test for #link2 - dynamically created eventlistener
alert(elem.onclick); // null
alert(elem.hasAttribute('onclick')); // false
alert(elem.click); // function click(){[native code]} // btw, what's this?
[jsFiddleはこちら](https://jsfiddle.net/qv0k7Lor/)。 をクリックしてから "[リンク2]" をクリックすると、イベントはうまく発火します、 しかし、"Test link 2"は常にfalseを報告します。 誰か助けてください。
66
14
動的にアタッチされるイベント・リスナーが存在するかどうかをチェックする方法はない。
イベント・リスナーがアタッチされているかどうかを確認する唯一の方法は、このようにイベント・リスナーをアタッチすることです:
イベントリスナーが
onclick
にアタッチされているかどうかを調べるには、!!elem.onclick
(または同様のもの)を返します。私はそのようなことをしました:
リスナーが添付されているときに要素の特別な属性を作成し、それが存在するかどうかを確認します。
最初はFALSEで、イベントをアタッチしたときにTRUEに設定されるブール値を関数の外に作成します。これは、イベントを再度アタッチする前に、ある種のフラグとして機能します。以下はその例です。
tl; dr :いいえ、ネイティブにサポートされている方法でこれを行うことはできません。
___。
これを達成するために私が知っている唯一の方法は、追加されたリスナーの記録を保持するカスタムストレージオブジェクトを作成することです。 次の線に沿った何か:
ステップ1:まず、ストレージオブジェクトをトラバースして、要素(またはfalse)を指定した要素のレコードを返すことができる関数が必要です。
ステップ2:次に、イベントリスナーを追加できる機能が必要ですが、リスナーをストレージオブジェクトに挿入することもできます。
ステップ3:質問の実際の要件に関して、要素が指定されたイベントのイベントリスナーに追加されているかどうかを確認するには、次の機能が必要です。
ステップ4:最後に、ストレージオブジェクトからリスナーを削除できる関数が必要になります。
___。
スニペット:。
。
。
___。
OPが質問を投稿してから5年以上が経過しましたが、将来この回答に遭遇した人はこの回答の恩恵を受けると思いますので、提案や改善を行ってください。 😊 。
たとえば、Chromeインスペクタを使用してEventListenerが存在するかどうかを常に手動で確認できます。 [要素]タブには、従来の[スタイル]サブタブがあり、その近くに別のサブタブがあります:[イベントリスナー]。 これにより、リンクされた要素を持つすべてのEventListenersのリストが表示されます。
重複の可能性:https://stackoverflow.com/questions/28056716/check-if-an-element-has-event-listener-on-it-no-jquery/41137585。 そこで私の答えを見つけてください。
基本的に、これがChromium(Chrome)ブラウザのトリックです。
動的にアタッチされたイベント・リスナーの存在をチェックするために使用したスクリプトを紹介します。jQueryを使って要素にイベントハンドラをアタッチし、そのイベント(この場合は 'click'イベント)をトリガーしています。こうすることで、イベント・ハンドラがアタッチされている場合にのみ存在するイベント・プロパティを取得し、キャプチャすることができます。
この方法が存在しないのは奇妙に思われます。 最後に追加する時が来ました?
あなたがしたいなら、次のようなことができます(テストされていません):
追加する前にイベントを削除してください:
これを実現できるスクリプトを書きました。 2つのグローバル機能を提供します:
hasEvent(Node elm、String event)
とgetEvents(Node elm)
を利用できます。EventTarget
プロトタイプメソッドadd / RemoveEventListener
を変更し、HTMLマークアップまたはelm.on_event =のJavaScript構文を通じて追加されたイベントでは機能しないことに注意してください。 ...
。GitHubの詳細。
[ライブデモ][2] 。
スクリプト:。
特定の要素で登録されたイベントを検索するクロスブラウザ関数はないようです。
ただし、一部のブラウザーでは、開発ツールを使用して要素のコールバック関数を表示できます。 これは、Webページの機能を決定しようとするとき、またはコードをデバッグするときに役立ちます。
Firefox 。
まず、開発者ツール内の[インスペクター]タブで要素を表示します。 これは可能です:
-ページ上で、検査するWebページのアイテムを右クリックし、メニューから[要素の検査]を選択します。 -コンソール内で、 document.querySelector などの関数を使用して要素を選択し、要素の横にあるアイコンをクリックして、[インスペクター]タブで表示します。
イベントが要素に登録されている場合は、要素の横に「イベント」という単語を含むボタンが表示されます。 クリックすると、要素に登録されているイベントを確認できます。 イベントの横にある矢印をクリックすると、そのコールバック関数を表示できます。
クローム。
まず、開発者ツール内の[要素]タブで要素を表示します。 これは可能です:
-ページ上で、検査するWebページのアイテムを右クリックして、メニューから[検査]を選択します。 -コンソール内関数を使用して document.querySelector などの要素を選択し、要素を右クリックして[要素のリビール]を選択し、[インスペクター]タブで表示します。
Webページの要素を含むツリーを表示するウィンドウのセクションの近くに、「イベントリスナー」というタイトルのタブがある別のセクションがあるはずです。 選択すると、要素に登録されたイベントが表示されます。 特定のイベントのコードを表示するには、その右側にあるリンクをクリックします。
Chromeでは、要素のイベントは getEventListeners 関数を使用して見つけることもできます。 ただし、私のテストでは、 getEventListeners 関数は、複数の要素が渡されたときにイベントをリストしません。 リスナーがいるページ上のすべての要素を見つけ、それらのリスナーのコールバック関数を表示する場合は、コンソールで次のコードを使用してこれを行うことができます。
私がよく理解している場合、リスナーがチェックされているかどうかを確認することしかできませんが、どのリスナーが特にプレゼンターであるかを確認することはできません。
したがって、一部のアドホックコードは、コーディングフローを処理するためのギャップを埋めます。 実用的な方法は、変数を使用して「状態」を作成することです。 たとえば、次のようにリスナーのチェッカーを添付します。
次に、リスナーを設定する場合は、値を変更します。
次に、eventListenerのコールバック内で、特定の機能を内部に割り当てることができます。これと同じように、いくつかの状態に応じて、関数へのアクセスを変数として分散できます。例:
理論的には、piggyback addEventListenerとremoveEventListenerを使用して、フラグを「this」オブジェクトに削除できます。 醜いと私はテストしていません。 ...
イベントが添付されているかどうかを確認して、これを見つけました。...
あなたがした場合:
「null」を返します。
しかし、あなたがするなら:
それが「TRUE」です。
「addEventListener」を使用してイベントハンドラーを追加する場合、それにアクセスする唯一の方法は「hasOwnProperty」を使用することだと思います。 理由や方法を知っていればいいのに、残念ながら、調査した結果、説明が見つかりませんでした。