Wie kann überprüft werden, ob ein dynamisch angehängter Ereignis-Listener existiert oder nicht?

Hier ist mein problem: ist es irgendwie möglich zu prüfen, für die Existenz von dynamisch verbunden sind Ereignis-listener? Oder wie kann ich den status des "onclick" (?) Immobilie in DOM? Ich habe gesucht internet wie StackOverflow für eine Lösung, 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 in javascript füge ich dynamisch erstellte Ereignis-listener, um den 2. link:

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

Der code läuft auch gut, aber alle meine versuche, zu erkennen, dass der angeschlossene Hörer fail:

//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 hier.
Wenn Sie klicken Sie auf "Hinzufügen" onclick für 2" und dann "[link 2]", - Ereignis wird ausgelöst, gut,
aber der "Test-link 2" immer-berichten falsch.
Kann jemand helfen?

InformationsquelleAutor der Frage Stano | 2012-07-12

20

Gibt es keine Möglichkeit zu überprüfen, ob dynamisch verbunden sind Ereignis-Listener existiert oder nicht.

Nur so können Sie sehen, wenn Sie einen Ereignis-listener angehängt ist, wird durch Anhängen von Ereignis-Listenern wie diese:
```
elem.onclick = function () { console.log (1) }
```
Können Sie dann testen, ob ein Ereignis-listener angehängt wurde onclick durch Rücksendung !!elem.onclick (oder so ähnlich).

InformationsquelleAutor der Antwort Ivan

Was ich tun würde, ist, erstellen Sie eine Boolesche außerhalb Ihrer Funktion, die beginnt, als FALSE und auf TRUE festgelegt wird, wenn Sie schließen Sie das Ereignis. Dies würde dienen als eine Art Flagge für Sie vor Sie schließen Sie die Veranstaltung wieder. Hier ist ein Beispiel, 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);
    }
}

InformationsquelleAutor der Antwort Cesar

4

Konnte man immer manuell zu überprüfen, wenn Ihr EventListener vorhanden mit Chrom-Inspektor zum Beispiel.
Im Reiter Element, Sie haben die traditionellen "Styles" - Tab und in der Nähe noch eins : "Ereignis-Listener".
Die Ihnen die Liste aller EventListeners, die mit Ihr verbundenen Elemente.

InformationsquelleAutor der Antwort Paul Leclerc
3

Hier ist ein script, das ich verwendet, um zu überprüfen, die für die Existenz eines dynamisch angefügte Ereignis-listener. Ich verwendet jQuery, um fügen Sie einen Ereignis-handler an ein element, dann trigger-Ereignis (in diesem Fall die "click" - Ereignis). Auf diese Weise kann ich abrufen und erfassen von Ereignis-Eigenschaften bestehen nur, wenn der event-handler verbunden 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');
}
```
InformationsquelleAutor der Antwort dsmith63

Habe ich sowas 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 von speziellen Attribut für ein element, wenn der Hörer angeschlossen ist, und dann prüfen ob es vorhanden ist.

InformationsquelleAutor der Antwort Karol Grabowski

Ich habe gerade ein script geschrieben, dass können Sie dies erreichen. Es gibt Sie für zwei Globale Funktionen: hasEvent(Node elm, String event) und getEvents(Node elm) die Sie nutzen können. Werden Sie sich bewusst, dass es ändert die EventTarget Prototyp-Methode add/RemoveEventListenerund nicht für Ereignisse Hinzugefügt, die durch HTML-markup oder javascript-syntax elm.on_event = ...

Mehr Infos auf 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)}();

InformationsquelleAutor der Antwort Gaurang Tandon

-1

Ich nur fand dies heraus, indem Sie versuchen, um zu sehen, ob meine Falle befestigt war....

wenn Sie :
```
item.onclick
```
wird es wieder "null"

aber wenn Sie das tun:
```
item.hasOwnProperty('onclick')
```
dann ist es "WAHR"

also ich denke, dass, wenn man "addEventListener" zum hinzufügen von event-Handler, der einzige Weg, um es durch "hasOwnProperty". Ich wünschte, ich wusste, warum oder wie, aber ach, nach einiger recherche, habe ich nicht eine Erklärung gefunden.

InformationsquelleAutor der Antwort carinlynchin
-1

Könnte man in der Theorie Huckepack addEventListener und removeEventListener hinzufügen, entfernen einer Flagge auf der "this" - Objekt. Hässlich und habe ich noch nicht getestet ...

InformationsquelleAutor der Antwort kofifus

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.