Comment vérifier si l'auditeur d'événements attaché dynamiquement existe ou non ?

Question

Voici mon problème : est-il possible de vérifier l'existence d'un récepteur d'événement attaché dynamiquement ? Ou comment puis-je vérifier l'état de la propriété "onclick" ( ?) dans le DOM ? J'ai cherché une solution sur Internet, comme sur Stack Overflow, mais sans succès. Voici mon code html :

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

Ensuite, en Javascript, j'attache un récepteur d'événements créé dynamiquement au deuxième lien :

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

Le code s'exécute correctement, mais toutes mes tentatives de détection de l'auditeur attaché échouent :

// 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 est ici . Si vous cliquez sur "Add onclick for 2" puis sur "[link 2]", l'événement se déclenche bien, mais l'événement "Test link 2" est toujours faux. Quelqu'un peut-il m'aider ?

Answer 1

Bonjour Je propose ici ma méthode qui fonctionne d'une certaine manière pour éviter de se retrouver avec plusieurs even listen sur le même élément du DOM. Ma méthode utilise JQUERY mais le principe est le suivant :

Après un traitement particulier de votre application où vous devez reproduire un listener sur un élément du DOM tel que le click, alors on commence par supprimer l'événement pour éviter de l'avoir plusieurs fois et immédiatement après on le recrée.

Ce principe est à adapter en fonction des besoins. Ce n'est que le principe. Je vous montre comment le faire en jquery.

line 1 : $(_ELTDOM_).unbind('click');
line 2 : $(_ELTDOM_).bind('click',myFct);

J'espère que cela pourra aider certaines personnes en adaptant cette solution. J'insiste sur le fait que cette solution n'est pas forcément applicable en toutes circonstances mais elle permet déjà de résoudre les problèmes liés aux doubles, triples... traitements simultanés dus à plusieurs écoutes sur un même élément par exemple

Answer 2

J'ai écrit 3 fonctions pour ce faire :

var addEvent = function(object, type, callback)
{
    if (object != null && typeof(object) != 'undefined' && object.addEventListener)
    {
        object.isAttached = typeof object.isAttached == "undefined" ? [] : object.isAttached;
        if (!object.isAttached[type])
        {
            object.isAttached[type] = true;
            object.addEventListener(type, callback, false);
        }
    }
};

var removeEvent = function(object, type, callback)
{
    if (object != null && typeof(object) != "undefined" && typeof object.isAttached != "undefined" && object.isAttached[type])
    {
        object.removeEventListener(type, callback, false);
        object.isAttached[type] = false;
    }
};

var hasEvent = function(object, type, callback)
{
    return object != null && typeof(object) != "undefined" && typeof object.isAttached != "undefined" && object.isAttached[type];
};

L'utilisation des fonctions est simple :

function mousemove(e)
{
    console.log("x:" + e.clientX + ", y:" + e.clientY);
}

if (hasEvent(window, "mousemove", mousemove))
    console.log('window has "mousemove" event with "mousemove" callback');
else
    console.log('window does not have "mousemove" event with "mousemove" callback');

addEvent(window, "mousemove", mousemove);

if (hasEvent(window, "mousemove", mousemove))
    console.log('window has "mousemove" event with "mousemove" callback');
else
    console.log('window does not have "mousemove" event with "mousemove" callback');
/*
Output
window does not have "mousemove" event with "mousemove"
window has "mousemove" event with "mousemove" callback
The x and y coordinates of mouse as you move it
*/

Answer 3

document.addEventListener('CustomEvent', delegate_method, {once:true});

Answer 4

En théorie, vous pourriez superposer addEventListener et removeEventListener pour ajouter un drapeau à l'objet "this". C'est moche et je n'ai pas testé...