Wie kann ich überprüfen, ob ein dynamisch angehängter Ereignis-Listener vorhanden ist oder nicht?

Hier ist mein Problem: Ist es irgendwie möglich, die Existenz eines dynamisch angehängten Ereignis-Listeners zu überprüfen? Oder wie kann ich den Status der Eigenschaft "onclick" (?) In DOM überprüfen? Ich habe wie Stack Overflow im Internet nach einer Lösung gesucht, aber kein Glück. Hier ist mein HTML:

<a id="link1" onclick="linkclick(event)"> link 1 </a>
<a id="link2"> link 2 </a> <!-- without inline onclick handler -->

Dann hänge ich in Javascript dynamisch erstellten Ereignis-Listener an den 2. Link an:

document.getElementById('link2').addEventListener('click', linkclick, false);

Der Code läuft gut, aber alle meine Versuche, diesen angehängten Listener zu erkennen, schlagen fehl:

// 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 ist da . Wenn Sie auf "Add onclick for 2" und dann auf "[link 2]" klicken, wird das Ereignis gut ausgelöst, aber der "Test link 2" meldet immer false. Kann jemand helfen?

Es gibt keine Möglichkeit zu überprüfen, ob dynamisch angehängte Ereignis-Listener vorhanden sind oder nicht.

Sie können nur sehen, ob ein Ereignis-Listener angehängt ist, indem Sie Ereignis-Listener wie folgt anhängen:

elem.onclick = function () { console.log (1) }

Sie können dann testen, ob ein Ereignis-Listener angehängt wurde, onclickindem Sie zurückkehren !!elem.onclick(oder etwas Ähnliches).

Ich habe so etwas gemacht:

const element = document.getElementById('div');

if (element.getAttribute('listener') !== 'true') {
     element.addEventListener('click', function (e) {
         const elementClicked = e.target;
         elementClicked.setAttribute('listener', 'true');
         console.log('event has been attached');
    });
}

Erstellen eines speziellen Attributs für ein Element, wenn der Listener angehängt ist, und Überprüfen, ob es vorhanden ist.

Ich würde einen Booleschen Wert außerhalb Ihrer Funktion erstellen, der als FALSE beginnt und beim Anhängen des Ereignisses auf TRUE gesetzt wird. Dies würde als eine Art Flagge für Sie dienen, bevor Sie das Ereignis erneut anhängen. Hier ist ein Beispiel für die Idee.

// initial load
var attached = false;

// this will only execute code once
doSomething = function()
{
 if (!attached)
 {
  attached = true;
  //code
 }
} 

//attach your function with change event
window.onload = function()
{
 var txtbox = document.getElementById('textboxID');

 if (window.addEventListener)
 {
  txtbox.addEventListener('change', doSomething, false);
 }
 else if(window.attachEvent)
 {
  txtbox.attachEvent('onchange', doSomething);
 }
}

tl; dr : Nein, Sie können dies nicht auf nativ unterstützte Weise tun.

Die einzige Möglichkeit, dies zu erreichen, besteht darin, ein benutzerdefiniertes Speicherobjekt zu erstellen, in dem Sie die hinzugefügten Listener aufzeichnen. Etwas in der folgenden Richtung:

/* Create a storage object. */
var CustomEventStorage = [];

Schritt 1: Zunächst benötigen Sie eine Funktion, die das Speicherobjekt durchlaufen und den Datensatz eines Elements mit dem angegebenen Element (oder false) zurückgeben kann.

/* The function that finds a record in the storage by a given element. */
function findRecordByElement (element) {
    /* Iterate over every entry in the storage object. */
    for (var index = 0, length = CustomEventStorage.length; index < length; index++) {
        /* Cache the record. */
        var record = CustomEventStorage[index];

        /* Check whether the given element exists. */
        if (element == record.element) {
            /* Return the record. */
            return record;
        }
    }

    /* Return false by default. */
    return false;
}

Schritt 2: Dann benötigen Sie eine Funktion, die einen Ereignis-Listener hinzufügen, aber auch den Listener in das Speicherobjekt einfügen kann.

/* The function that adds an event listener, while storing it in the storage object. */
function insertListener (element, event, listener, options) {
    /* Use the element given to retrieve the record. */
    var record = findRecordByElement(element);

    /* Check whether any record was found. */
    if (record) {
        /* Normalise the event of the listeners object, in case it doesn't exist. */
        record.listeners[event] = record.listeners[event] || [];
    }
    else {
        /* Create an object to insert into the storage object. */
        record = {
            element: element,
            listeners: {}
        };

        /* Create an array for event in the record. */
        record.listeners[event] = [];

        /* Insert the record in the storage. */
        CustomEventStorage.push(record);
    }

    /* Insert the listener to the event array. */
    record.listeners[event].push(listener);

    /* Add the event listener to the element. */
    element.addEventListener(event, listener, options);
}

Schritt 3: In Bezug auf die tatsächliche Anforderung Ihrer Frage benötigen Sie die folgende Funktion, um zu überprüfen, ob einem Element ein Ereignis-Listener für ein bestimmtes Ereignis hinzugefügt wurde.

/* The function that checks whether an event listener is set for a given event. */
function listenerExists (element, event, listener) {
    /* Use the element given to retrieve the record. */
    var record = findRecordByElement(element);

    /* Check whether a record was found & if an event array exists for the given event. */
    if (record && event in record.listeners) {
        /* Return whether the given listener exists. */
        return !!~record.listeners[event].indexOf(listener);
    }

    /* Return false by default. */
    return false;
}

Schritt 4: Schließlich benötigen Sie eine Funktion, mit der Sie einen Listener aus dem Speicherobjekt löschen können.

/* The function that removes a listener from a given element & its storage record. */
function removeListener (element, event, listener, options) {
    /* Use the element given to retrieve the record. */
    var record = findRecordByElement(element);

    /* Check whether any record was found and, if found, whether the event exists. */
    if (record && event in record.listeners) {
        /* Cache the index of the listener inside the event array. */
        var index = record.listeners[event].indexOf(listener);

        /* Check whether listener is not -1. */
        if (~index) {
            /* Delete the listener from the event array. */
            record.listeners[event].splice(index, 1);
        }

        /* Check whether the event array is empty or not. */
        if (!record.listeners[event].length) {
            /* Delete the event array. */
            delete record.listeners[event];
        }
    }

    /* Add the event listener to the element. */
    element.removeEventListener(event, listener, options);
}

Snippet:

window.onload = function () {
  var
    /* Cache the test element. */
    element = document.getElementById("test"),

    /* Create an event listener. */
    listener = function (e) {
      console.log(e.type + "triggered!");
    };

  /* Insert the listener to the element. */
  insertListener(element, "mouseover", listener);

  /* Log whether the listener exists. */
  console.log(listenerExists(element, "mouseover", listener));

  /* Remove the listener from the element. */
  removeListener(element, "mouseover", listener);

  /* Log whether the listener exists. */
  console.log(listenerExists(element, "mouseover", listener));
};

<!-- Include the Custom Event Storage file -->
<script src = "https://cdn.rawgit.com/angelpolitis/custom-event-storage/master/main.js"></script>

<!-- A Test HTML element -->
<div id = "test" style = "background:#000; height:50px; width: 50px"></div>

Obwohl mehr als fünf Jahre vergangen sind, seit das OP die Frage gestellt hat, glaube ich, dass Menschen, die in Zukunft darauf stoßen, von dieser Antwort profitieren werden. Sie können also gerne Vorschläge oder Verbesserungen dazu machen. 😊

Mögliches Duplikat: Überprüfen Sie, ob auf einem Element ein Ereignis-Listener vorhanden ist. Keine jQuery finden Sie meine Antwort.

Grundsätzlich ist hier der Trick für Chromium (Chrome) Browser:

getEventListeners(document.querySelector('your-element-selector'));

Sie können jederzeit manuell überprüfen, ob Ihr EventListener vorhanden ist, indem Sie beispielsweise den Chrome-Inspektor verwenden. Auf der Registerkarte "Element" befindet sich die traditionelle Unterregisterkarte "Stile" und in der Nähe eine weitere: "Ereignis-Listener". Dadurch erhalten Sie eine Liste aller EventListener mit ihren verknüpften Elementen.

Es scheint seltsam, dass diese Methode nicht existiert. Ist es Zeit, es endlich hinzuzufügen?

Wenn Sie wollten, könnten Sie so etwas wie das Folgende:

var _addEventListener = EventTarget.prototype.addEventListener;
var _removeEventListener = EventTarget.prototype.removeEventListener;
EventTarget.prototype.events = {};
EventTarget.prototype.addEventListener = function(name, listener, etc) {
  var events = EventTarget.prototype.events;
  if (events[name] == null) {
    events[name] = [];
  }

  if (events[name].indexOf(listener) == -1) {
    events[name].push(listener);
  }

  _addEventListener(name, listener);
};
EventTarget.prototype.removeEventListener = function(name, listener) {
  var events = EventTarget.prototype.events;

  if (events[name] != null && events[name].indexOf(listener) != -1) {
    events[name].splice(events[name].indexOf(listener), 1);
  }

  _removeEventListener(name, listener);
};
EventTarget.prototype.hasEventListener = function(name) {
  var events = EventTarget.prototype.events;
  if (events[name] == null) {
    return false;
  }

  return events[name].length;
};

Hier ist ein Skript, mit dem ich überprüft habe, ob ein dynamisch angehängter Ereignis-Listener vorhanden ist. Ich habe jQuery verwendet, um einen Ereignishandler an ein Element anzuhängen und dann dieses Ereignis auszulösen (in diesem Fall das Ereignis 'click'). Auf diese Weise kann ich Ereigniseigenschaften abrufen und erfassen, die nur vorhanden sind, wenn der Ereignishandler angehängt ist.

var eventHandlerType;

$('#contentDiv').on('click', clickEventHandler).triggerHandler('click');

function clickEventHandler(e) {
    eventHandlerType = e.type;
}

if (eventHandlerType === 'click') {
    console.log('EventHandler "click" has been applied');
}

Es scheint keine browserübergreifende Funktion zu geben, die nach Ereignissen sucht, die unter einem bestimmten Element registriert sind.

Es ist jedoch möglich, die Rückruffunktionen für Elemente in einigen Browsern mithilfe ihrer Entwicklungstools anzuzeigen. Dies kann hilfreich sein, wenn Sie versuchen, die Funktionsweise einer Webseite zu bestimmen oder Code zu debuggen.

Feuerfuchs

Zeigen Sie zunächst das Element auf der Registerkarte Inspektor in den Entwicklertools an. Das kann gemacht werden:

• Klicken Sie auf der Seite mit der rechten Maustaste auf das Element auf der Webseite, das Sie überprüfen möchten, und wählen Sie im Menü "Element überprüfen" aus.
• Verwenden Sie in der Konsole eine Funktion, um das Element auszuwählen, z. B. document.querySelector , und klicken Sie dann auf das Symbol neben dem Element, um es auf der Registerkarte Inspektor anzuzeigen.

Wenn Ereignisse für das Element registriert wurden, wird neben dem Element eine Schaltfläche mit dem Wort Ereignis angezeigt. Wenn Sie darauf klicken, werden die Ereignisse angezeigt, die für das Element registriert wurden. Durch Klicken auf den Pfeil neben einem Ereignis können Sie die Rückruffunktion für dieses Ereignis anzeigen.

Chrom

Zeigen Sie zunächst das Element auf der Registerkarte Elemente in den Entwicklertools an. Das kann gemacht werden:

• Klicken Sie auf der Seite mit der rechten Maustaste auf das Element auf der Webseite, das Sie überprüfen möchten, und wählen Sie im Menü die Option "Überprüfen" aus
• Verwenden Sie in der Konsole eine Funktion, um das Element auszuwählen, z. B. document.querySelector , klicken Sie mit der rechten Maustaste auf das Element und wählen Sie "In Elementen anzeigen", um es auf der Registerkarte " Inspektor " anzuzeigen .

In der Nähe des Abschnitts des Fensters, in dem der Baum mit den Webseitenelementen angezeigt wird, sollte sich ein weiterer Abschnitt mit einer Registerkarte mit dem Titel "Ereignis-Listener" befinden. Wählen Sie diese Option aus, um Ereignisse anzuzeigen, die für das Element registriert wurden. Um den Code für ein bestimmtes Ereignis anzuzeigen, klicken Sie auf den Link rechts davon.

In Chrome können Ereignisse für ein Element auch mit der Funktion getEventListeners gefunden werden. Basierend auf meinen Tests listet die Funktion getEventListeners jedoch keine Ereignisse auf, wenn mehrere Elemente an sie übergeben werden. Wenn Sie alle Elemente auf der Seite mit Listenern suchen und die Rückruffunktionen für diese Listener anzeigen möchten, können Sie dazu den folgenden Code in der Konsole verwenden:

var elems = document.querySelectorAll('*');

for (var i=0; i <= elems.length; i++) {
    var listeners = getEventListeners(elems[i]);

    if (Object.keys(listeners).length < 1) {
        continue;
    }

    console.log(elems[i]);

    for (var j in listeners) {
        console.log('Event: '+j);

        for (var k=0; k < listeners[j].length; k++) {
            console.log(listeners[j][k].listener);
        }
    }
}

Bitte bearbeiten Sie diese Antwort, wenn Sie wissen, wie Sie dies in den angegebenen Browsern oder in anderen Browsern tun können.

Ich habe das gerade herausgefunden, indem ich versucht habe zu sehen, ob meine Veranstaltung beigefügt ist ...

wenn Sie tun :

item.onclick

es wird "null" zurückgeben

aber wenn Sie dies tun:

item.hasOwnProperty('onclick')

dann ist es "WAHR"

Wenn Sie also "addEventListener" zum Hinzufügen von Ereignishandlern verwenden, können Sie nur über "hasOwnProperty" darauf zugreifen. Ich wünschte, ich wüsste warum oder wie, aber leider habe ich nach Recherchen keine Erklärung gefunden.

Wenn ich es gut verstehe, können Sie nur überprüfen, ob ein Listener überprüft wurde, nicht jedoch, welcher Listener speziell der Moderator ist.

Ein Ad-hoc-Code würde also die Lücke füllen, um Ihren Codierungsfluss zu handhaben. Eine praktische Methode wäre das Erstellen einer stateusing-Variablen. Fügen Sie beispielsweise den Checker eines Listeners wie folgt hinzu:

var listenerPresent=false

Wenn Sie dann einen Listener einstellen, ändern Sie einfach den Wert:

listenerPresent=true

Anschließend können Sie im Rückruf Ihres eventListener bestimmte Funktionen zuweisen und auf dieselbe Weise den Zugriff auf Funktionen abhängig von einem bestimmten Status als Variable verteilen, z. B.:

accessFirstFunctionality=false
accessSecondFunctionality=true
accessThirdFunctionality=true

Entfernen Sie einfach das Ereignis, bevor Sie es hinzufügen:

document.getElementById('link2').removeEventListener('click', linkclick, false);
document.getElementById('link2').addEventListener('click', linkclick, false);

Ich habe gerade ein Skript geschrieben, mit dem Sie dies erreichen können. Es gibt Ihnen zwei globale Funktionen: hasEvent(Node elm, String event)und getEvents(Node elm)die Sie nutzen können. Beachten Sie, dass die EventTargetPrototypmethode geändert add/RemoveEventListenerwird und nicht für Ereignisse funktioniert, die über HTML-Markup oder Javascript-Syntax von hinzugefügt wurdenelm.on_event = ...

Mehr Infos bei GitHub

Live-Demo

Skript:

var hasEvent,getEvents;!function(){function b(a,b,c){c?a.dataset.events+=","+b:a.dataset.events=a.dataset.events.replace(new RegExp(b),"")}function c(a,c){var d=EventTarget.prototype[a+"EventListener"];return function(a,e,f,g,h){this.dataset.events||(this.dataset.events="");var i=hasEvent(this,a);return c&&i||!c&&!i?(h&&h(),!1):(d.call(this,a,e,f),b(this,a,c),g&&g(),!0)}}hasEvent=function(a,b){var c=a.dataset.events;return c?new RegExp(b).test(c):!1},getEvents=function(a){return a.dataset.events.replace(/(^,+)|(,+$)/g,"").split(",").filter(function(a){return""!==a})},EventTarget.prototype.addEventListener=c("add",!0),EventTarget.prototype.removeEventListener=c("remove",!1)}();

Theoretisch können Sie addEventListener und removeEventListener huckepack nehmen, um dem 'this'-Objekt ein Flag zum Entfernen hinzuzufügen. Hässlich und ich habe nicht getestet ...