Come verificare se esiste o meno un listener di eventi collegato dinamicamente?

Ecco il mio problema: è possibile in qualche modo verificare l'esistenza di un listener di eventi collegato dinamicamente? O come posso controllare lo stato della proprietà "onclick" (?) In DOM? Ho cercato una soluzione su Internet come Stack Overflow, ma senza fortuna. Ecco il mio html:

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

Quindi in Javascript allego il listener di eventi creato dinamicamente al 2 ° collegamento:

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

Il codice funziona bene, ma tutti i miei tentativi di rilevare quel listener allegato falliscono:

// 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 è qui . Se fai clic su "Aggiungi su clic per 2" e quindi su "[link 2]", l'evento viene attivato correttamente, ma "Test link 2" riporta sempre falso. Qualcuno può aiutare?

Non è possibile verificare se i listener di eventi associati dinamicamente esistono o meno.

L'unico modo per vedere se un listener di eventi è collegato è allegando listener di eventi in questo modo:

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

È quindi possibile verificare se un listener di eventi è stato allegato onclickrestituendo !!elem.onclick(o qualcosa di simile).

Ho fatto qualcosa del genere:

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');
    });
}

Creazione di un attributo speciale per un elemento quando il listener è collegato e quindi verifica se esiste.

Quello che farei è creare un booleano al di fuori della funzione che inizia come FALSE e viene impostato su TRUE quando alleghi l'evento. Questo servirebbe come una sorta di bandiera per te prima di allegare nuovamente l'evento. Ecco un esempio dell'idea.

// 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);
 }
}

Possibile duplicato: controlla se un elemento ha un listener di eventi su di esso. No jQuery Si prega di trovare la mia risposta lì.

Fondamentalmente ecco il trucco per il browser Chromium (Chrome):

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

tl; dr : No, non puoi farlo in alcun modo supportato nativamente.

L'unico modo che conosco per ottenere questo risultato sarebbe creare un oggetto di archiviazione personalizzato in cui si tiene un registro degli ascoltatori aggiunti. Qualcosa sulla seguente falsariga:

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

Passaggio 1: in primo luogo, avrai bisogno di una funzione che possa attraversare l'oggetto di archiviazione e restituire il record di un elemento dato l'elemento (o falso).

/* 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;
}

Passaggio 2: quindi, sarà necessaria una funzione che possa aggiungere un listener di eventi ma anche inserire il listener nell'oggetto di archiviazione.

/* 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);
}

Passaggio 3: per quanto riguarda il requisito effettivo della tua domanda, avrai bisogno della seguente funzione per verificare se a un elemento è stato aggiunto un listener di eventi per un evento specificato.

/* 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;
}

Passaggio 4: infine, avrai bisogno di una funzione che possa eliminare un listener dall'oggetto di archiviazione.

/* 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);
}

Frammento:

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>

Sebbene siano trascorsi più di 5 anni da quando il PO ha pubblicato la domanda, credo che le persone che si imbatteranno in essa in futuro trarranno beneficio da questa risposta, quindi sentiti libero di dare suggerimenti o miglioramenti. 😊

Puoi sempre controllare manualmente se il tuo EventListener esiste utilizzando Chrome Inspector, ad esempio. Nella scheda Elemento hai la tradizionale sottoscheda "Stili" e vicino ad essa un'altra: "Ascoltatori di eventi". Che ti darà l'elenco di tutti gli EventListeners con i loro elementi collegati.

Sembra strano che questo metodo non esista. È ora di aggiungerlo finalmente?

Se lo volessi, potresti qualcosa del genere:

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;
};

Ecco uno script che ho usato per verificare l'esistenza di un listener di eventi collegato dinamicamente. Ho usato jQuery per collegare un gestore di eventi a un elemento, quindi attivare quell'evento (in questo caso l'evento "click"). In questo modo posso recuperare e acquisire le proprietà degli eventi che esisteranno solo se il gestore eventi è collegato.

var eventHandlerType;

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

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

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

Non sembra esserci una funzione cross browser che cerca gli eventi registrati sotto un dato elemento.

Tuttavia, è possibile visualizzare le funzioni di richiamata per elementi in alcuni browser utilizzando i loro strumenti di sviluppo. Ciò può essere utile quando si tenta di determinare il funzionamento di una pagina Web o per il debug del codice.

Firefox

Per prima cosa, visualizza l'elemento nella scheda Impostazioni all'interno degli strumenti per sviluppatori. Questo può essere fatto:

• Nella pagina facendo clic con il pulsante destro del mouse sull'elemento della pagina Web che si desidera ispezionare e selezionando "Ispeziona elemento" dal menu.
• All'interno della console utilizzando una funzione per selezionare l'elemento, come document.querySelector , quindi facendo clic sull'icona accanto all'elemento per visualizzarlo nella scheda Impostazioni .

Se nell'elemento sono stati registrati eventi, verrà visualizzato un pulsante contenente la parola Evento accanto all'elemento. Cliccandolo ti permetterà di vedere gli eventi che sono stati registrati con l'elemento. Facendo clic sulla freccia accanto a un evento è possibile visualizzare la relativa funzione di richiamata.

Cromo

Per prima cosa, visualizza l'elemento nella scheda Elementi all'interno degli strumenti per sviluppatori. Questo può essere fatto:

• Nella pagina facendo clic con il pulsante destro del mouse sull'elemento della pagina web che desideri esaminare e selezionando "Ispeziona" dal menu
• All'interno della console utilizzando una funzione per selezionare l'elemento, come document.querySelector , facendo clic con il pulsante destro del mouse sull'elemento e selezionando "Rivela nel pannello Elementi" per visualizzarlo nella scheda Impostazioni .

Vicino alla sezione della finestra che mostra l'albero contenente gli elementi della pagina web, dovrebbe esserci un'altra sezione con una scheda intitolata "List Listeners". Selezionalo per vedere gli eventi che sono stati registrati nell'elemento. Per vedere il codice per un determinato evento, fare clic sul collegamento a destra di esso.

In Chrome, gli eventi per un elemento possono essere trovati anche utilizzando la funzione getEventListeners . Tuttavia, in base ai miei test, la funzione getEventListeners non elenca gli eventi quando vengono passati più elementi. Se desideri trovare tutti gli elementi nella pagina che hanno listener e visualizzare le funzioni di callback per tali listener, puoi utilizzare il seguente codice nella console per farlo:

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);
        }
    }
}

Si prega di modificare questa risposta se si conoscono modi per farlo nei browser indicati o in altri browser.

L'ho appena scoperto cercando di vedere se il mio evento era allegato ...

se fate :

item.onclick

restituirà "null"

ma se lo fai:

item.hasOwnProperty('onclick')

allora è "TRUE"

quindi penso che quando si utilizza "addEventListener" per aggiungere gestori di eventi, l'unico modo per accedervi è tramite "hasOwnProperty". Vorrei sapere perché o come, ma purtroppo, dopo la ricerca, non ho trovato una spiegazione.

Se ho capito bene, puoi solo controllare se un ascoltatore è stato controllato ma non quale ascoltatore è specificatamente presentatore.

Quindi un codice ad hoc riempirebbe il vuoto per gestire il flusso di codifica. Un metodo pratico sarebbe creare un stateutilizzo delle variabili. Ad esempio, collega il controllo di un ascoltatore come segue:

var listenerPresent=false

quindi se imposti un listener cambia semplicemente il valore:

listenerPresent=true

quindi all'interno del callback del tuo eventListener puoi assegnare funzionalità specifiche al suo interno e allo stesso modo, distribuire l'accesso alle funzionalità a seconda di uno stato come variabile ad esempio:

accessFirstFunctionality=false
accessSecondFunctionality=true
accessThirdFunctionality=true

Basta rimuovere l'evento prima di aggiungerlo:

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

Ho appena scritto una sceneggiatura che ti consente di raggiungere questo obiettivo. Ti offre due funzioni globali: hasEvent(Node elm, String event)e getEvents(Node elm)che puoi utilizzare. Tieni presente che modifica il EventTargetmetodo del prototipo add/RemoveEventListenere non funziona per eventi aggiunti tramite markup HTML o sintassi javascript dielm.on_event = ...

Maggiori informazioni su GitHub

Dimostrazione dal vivo

Script:

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

In teoria potresti aggiungere addEventListener e removeEventListener per aggiungere remove a flag all'oggetto "this". Brutto e non ho provato ...