[JavaScript] Comment attacher un événement à un élément qui n'est pas encore présent dans la page ? [FAQ]

[Bovino]

Q : Comment attacher un événement à un élément qui n'est pas encore présent dans la page ?

R : Vous avez peut-être remarqué que certaines bibliothèques arrivent à attacher des événements à des éléments avant que ceux-ci ne soient intégrés dans le DOM et vous vous demandez peut-être comment cela est possible puisqu'il n'est pas possible en JavaScript de référencer un élément qui n'existe pas dans la page.
En fait, la solution consiste à prendre en compte le fait qu'un événement se propage (il bouillonne ou, en anglais, il bubble). Par exemple, si vous cliquez sur une balise span, cette balise va capturer l'événement, puis celui-ci va remonter dans l'arbre du DOM jusqu'à la racine (la balise body). A chaque balise rencontrée, JavaScript vérifie si un gestionnaire est attaché à cet événement et le lance si besoin.
D'autre part, chaque événement génère un objet Event (bien qu'il soit géré différemment selon les navigateurs et plus précisément par Internet Explorer jusqu'à la version 8) qui permet de connaitre la balise qui a capturé l'événement.

Il devient donc possible d'attacher le gestionnaire d'événement à n'importe quelle balise ascendante de celle (à venir) qui nous intéresse et à vérifier lorsque l'événement lui parvient si il provient effectivement de celle souhaitée, si c'est le cas, il suffit de lancer la fonction appropriée.

A titre d'exemple concernant le bouillonnement, le script suivant permet d'entourer en rouge l'élément actuellement survolé, bien que l'événement soit attaché au body de la page :

Code javascript :

1
2
3
4
5
6
7
document.body.onmouseover = function(e){
    var el = e ? e.target : event.srcElement;
    el.style.outline = '1px solid red';
    el.onmouseout = function(){
        this.style.outline = '';
    }
}

Vous noterez en particulier que ce gestionnaire n'entre pas en conflit avec ceux déjà attachés directement aux éléments.

Attention : il est aussi possible de stopper la propagation d'un événement, dans ce cas, il ne parviendra jamais au body, il est donc souhaitable d'attacher le gestionnaire à la balise existante connue la plus proche de celle souhaitée pour éviter ce genre de perturbation.

Voir un exemple en ligne : http://dmouronval.developpez.com/delegate/