#378 Javascript et évènements 26 Mars 2009

Javascript

Attention, il est important de considérer que cet article est une archive, son contenu est probablement obsolète!

Dans le cadre de mon cursus aux Gobelins, nous avons eu des cours de javascript. N'ayant pas envie de m'attarder sur les bases en javascript, je vais ici uniquement parler des événements appliqués via le DOM.

L'ancienne méthode consistait à mettre dans un attribut onclick (ou autre) le nom de la fonction javascript à activer.

Définition des événements

Il est assez simple de définir des événements. Il suffit de faire appel au DOM:

document.getElementById("lien").onclick = nomDeLaFonction;

Le html correspondant étant :

<a href="adresse" id="lien">Lien</a>

La liste des événements disponibles sur le W3Schools.

Erreurs classiques

Comme tout ce qui touche au DOM, pour pouvoir modifier des éléments, il faut attendre que la page soit entièrement chargée. Pour cela, il suffit de créer un événement lorsque l'objet window est considéré comme mis en mémoire.

window.onload = function() {
    // Le contenu de la méthode. 
}

La seconde erreur vient du fait de mettre des parenthèses derrière le nom de la fonction causant un appel immédiat de la fonction à la lecture du javascript.

Exemple :

document.getElementById("lien").onclick = alert("Ne fonctionne pas");

Le code fonctionnel sera :

document.getElementById("lien").onclick = function() {
    alert("Fonctionne") 
}; 

Récupérer le type de l'événement

Cette partie est un peu plus compliquée, elle dépend du navigateur. Le code ci-dessous est cross-browser.

Via la propriété type, on récupère le type de l'événement (exemple : click).

function eventCapture(ev) {
    var ev = ev || window.event; 
    alert(ev.type); 
}

La récupération de l'élément à l'origine de l'événement :

function eventCapture(ev) {
    var ev = ev || window.event; 
    var element = ev.target || ev.srcElement; 
    alert(element); 
}

Exemple

Dans la structure d'un document html classique, voici exemple de code fonctionnel.

Partie header :

<script type="text/javascript">
window.load = function() {
    document.getElementById("lien").onclick = afficherPopup;
};
 
function afficherPopup() {
    alert(this.href); 
};
</script>

Dans la partie body :

<a href="http://google.com" id="lien">Google</a>

Plusieurs événements

La solution précédente ne permet d'activer qu'une seule fonction à un événement. Si l'on en définit une ensuite de la même façon, elle écrasera l'événement initialement prévu.

Pour éviter ces collisions, il faut utiliser la méthode addEventListener (sous InternetExplorer : attachEvent).

/** Tous les navigateurs sauf IE **/
window.addEventListener(
    "onload", 
    function() { 
        alert("Hello")
    }, 
    false
);
 
window.addEventListener(
    "onload", 
    function() { 
        alert("world !")
    }, 
    false
);

Pour aller plus loin

Il y a des frameworks qui existent en javascript. Leur connaissance est aujourd'hui quasi-nécessaire pour accélérer tout ce qui touche aux traitements JS.

En continuité de cet article, je conseille vivement la lecture des fonctions offertes par JQuery sur les événements.

Pour tout ceux qui aiment le fait maison, documentation sur le DOM est largement suffisante pour avoir plus de détails sur les fonctions.

Ajouter un commentaire

Nom :

Email :

Site web :

Commentaire :

Se souvenir de moi