web-dev-qa-db-ja.com

JavaScript-イベントがすでに追加されているかどうかを確認する方法

beforeunloadのリスナーを1回だけ追加したい。これは私の疑似コードです：

if(window.hasEventListener('beforeunload') === false) {
     window.addEventListener('beforeunload', function() { ... }, false);
}

しかし、hasEventListenerは明らかに存在しません。どうすればこれを達成できますか？ありがとう。

javascriptevent-listener
21
Shlomo

Jqueryを使用すると、任意のオブジェクト（ここではウィンドウ）でdata("events")を使用できます。

_var hasbeforeunload = $(window).data("events") && $(window).data("events").['beforeunload'];
_

ただし、これはjqueryが追加したイベントに対してのみ機能します。

より一般的なケースでは、リスナーを追加する情報をどこかに保存するだけです。

_   var addedListeners = {};
   function addWindowListenerIfNone(eventType, fun) {
      if (addedListeners[eventType]) return;
      addedListeners[eventType] = fun;
      window.addEventListener(eventType, fun);
   }
_

JavaScriptには、既存のイベントハンドラーを取得する標準的な方法はないと思います。せいぜいNodeのaddEventListener関数を追加してリスナーをインターセプトして保存することができますが、お勧めしません...

編集：

JQuery 1.8以降、イベントデータは$._data(element, "events")で使用できます。変更ログには、考慮すべき警告があります：

これはサポートされているパブリックインターフェイスではないことに注意してください。実際のデータ構造は、バージョン間で互換性がなく変更される可能性があります。

7
Denys Séguret

実際、リスナーがターゲットに追加されたかどうかを確認する必要はありません。

複数の同一のEventListenerが同じEventTargetに同じパラメーターで登録されている場合、重複するインスタンスは破棄されます。 EventListenerが2回呼び出されることはありません。重複は破棄されるため、removeEventListenerメソッドを使用して手動で削除する必要はありません。

ソース： https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener#Multiple_identical_event_listeners

26
user4584026

Chrome開発ツールでは、要素にアタッチされたすべてのイベントを確認できます（デバッグ用）-

// print all events attached to document
var eventObjectAttachedToDocument = getEventListeners(document);

for (var event in eventObjectAttachedToDocument) {
    console.log(event);
}

enter image description here

1
Varun Kumar