Javascript est capable de détecter toute une série d’événements sur votre page web. Une technique rapide et très courante est d’utiliser un attribut HTML : onclick.
<a href="404.html" onclick="alert('Attention, lien mort !');">Cliquez-moi !</a>
Ce code affiche bien une alerte et effectue le comportement par défaut : aller sur une page 404.html qui n’existe pas. Pour empêcher ce comportement par défaut on va ajouter la commande return false;
<a href="404.html" onclick="alert('Ouille, ça chatouille !');return false;">Lien 1</a>
C’est parfois pratique mais pas idéal de coder des attributs dans le code HTML, nous pouvons donc reproduire cela dans notre code Javascript. Copiez ce code dans la console avant de cliquer sur « Lien 2 »
document.getElementById("lien2").onclick = function() {
alert("Ca chatouille aussi !");
return false;
};Ou mieux encore, utiliser .addEventListener qui va « écouter » les événements qui pourraient arriver à votre page web, dont le click, et qui sont très nombreux (voir lien en bas de page) !
Nous donnons par convention un argument e à la function et le return false; disparaît au profit de e.preventDefault();qui va effectuer le même travail, empêcher le comportement par défaut du navigateur.
Copiez ce code dans la console avant de cliquer sur « Lien 3 »
document.getElementById("lien3").addEventListener("click", function(e) {
e.preventDefault();
alert("Ca chatouille encore !");
});Utilisons l’argument e pour voir toutes les possibilités d’événements que Javascript peut gérer en ajoutant un console.log dans la fonction :
Copiez ce code dans la console avant de cliquer sur « Lien 3 »
document.getElementById("lien3").addEventListener("click", function(e) {
console.log(e);
e.preventDefault();
alert("Ca chatouille encore !");
});La fonction que nous avons déclarée au-dessus est une fonction « anonyme ». Il peut être utile et plus clair d’utiliser une fonction « de rappel » (callback en anglais). On crée d’abord la fonction avec un nom explicite puis on l’appelle quand il y a un événement.
Copiez ce code dans la console avant de cliquer sur « Lien 4 »
function maFonction(e) {
e.preventDefault();
alert("Ca chatouille troooop !");
};
document.getElementById("lien4").addEventListener("click", maFonction);Les événements possibles sur le DOM sont très nombreux, du double clic (dblclick) au clic droit (contextmenu) en passant par les événements spécifiques aux mobiles (touch…). Voici une liste qui devrait vous occuper un certain temps…
Ces événements peuvent se placer n’importe où dans le DOM. .addEventListener détecte des événements de manière globale. Pour preuve, essayons ce code qui s’attaque directement à window, la fenêtre du navigateur, et qui attend qu’on change sa taille pour modifier la couleur du fond de la balise <html>.
window.addEventListener("resize", function() {
document.querySelector("#content").style.backgroundColor = "lightblue";
});