Le navigateur gère un certain nombre d'événements que l'on peut capter en javascript.
Les événements sont captables sur tous les éléments du DOM ainsi que sur l'objet document et l'objet window
Les événements ont un nom normalisé dans tous les navigateurs
Nom | Description |
click | Un click sur un élément |
mousedown | Un appui sur l'un des boutons de la souris |
mouseup | Un lâché sur l'un des boutons de la souris |
mousemove | Un déplacement de la souris |
keypress | Une touche frappée au clavier |
keydown | Une touche enfoncée au clavier |
keyup | Une touche relâchée au clavier |
change | Un changement dans la valeur d'un champ de formulaire |
submit | Au moment de la soumission d'un formulaire |
load | Après le chargement complet de la page |
Liste de tous les événements de Firefox : https://developer.mozilla.org/fr/docs/Web/Events
Les éléments ont des propriétés qui permettent d'associer un objet fonction à un événement sur cet élément. Les propriétés dépendent de l'élément.
Les propriétés portent le préfixe on
<button id='bouton1'>Cliquez moi</button>
document.getElementById('bouton1').onclick=function(e) {
console.log(e) ;
}
Une fonction de rappel d'un événement prend en argument un objet de type Event.
L'objet Event possède des propriétés qui dépendent de l'événement.
Les événements sont diffusés à partir de la fenêtre window en deux phases consécutives.
L'événement part de l'objet window et est ensuite transmis à document puis à tous les éléments enfants jusqu'à la cible de l'événement.
Après la phase capture, l'événement repart de l'élément cible et est transmis à l'ensemble des éléments parents.
On peu capter un événement dans l'une ou l'autre des phases. Si un événement est capté dans la phase capture, on peut l'empêcher de continuer à être propagé aux enfants. A l'inverse dans la phase bubbling ou peut l'empêcher d'être transmis aux parents.
Le captage simple par les méthodes on se fait toujours dans la phase bubbling. C'est donc la méthode de l'élément cible qui sera appelée en premier.
<div id='d1'>
<div id='d2'>
<button id='b1'>Cliquez-moi !</button>
</div>
</div>
<script>
function click(e) {
console.log(e);
}
document.getElementById('d1').onclick=click;
document.getElementById('d2').onclick=click;
document.getElementById('b1').onclick=click;
</script>
Pour empêcher un événement de se propager, dans la fonction de rappel il suffit d'appeler la méthode stopPropagation() de l'événement.
<div id='d1'>
<div id='d2'>
<button id='b1'>Cliquez-moi !</button>
</div>
</div>
<script>
function click(e) {
console.log(e);
e.stopPropagation();
}
document.getElementById('d1').onclick=click;
document.getElementById('d2').onclick=click;
document.getElementById('b1').onclick=click;
</script>
Pour capter un événement on peut utiliser une méthode universelle que les méthodes simples : addEventListener().
Cette méthode prend 3 arguments :
une chaine de caractère représentant l'événement à capter : ex : 'click'
la fonction de rappel à exécuter : ex : click
la phase : true pour la phase capture ou false pour la phase bubbling
<div id='d1'>
<div id='d2'>
<button id='b1'>Cliquez-moi !</button>
</div>
</div>
<script>
function click(e) {
console.log(e);
}
document.getElementById('d1').addEventListener('click',click,true);
document.getElementById('d2').addEventListener('click',click,true);
document.getElementById('b1').addEventListener('click',click,true);
</script>
<div id='d1'>
<div id='d2'>
<button id='b1'>Cliquez-moi !</button>
</div>
</div>
<script>
function click(e) {
console.log(e);
}
document.getElementById('d1').addEventListener('click',click,false);
document.getElementById('d2').addEventListener('click',click,false);
document.getElementById('b1').addEventListener('click',click,false);
</script>
Certains événements sont gérés aussi par le navigateur, par exemple des raccourcis claviers, le menu contextuel sur click droit ou la sélection de texte (mousedown + mousemove).
On peut empêcher le comportement par défaut par la méthode de l'événement preventDefault()
Pour bloquer un événement sur toute la page, il suffit de le capter en phase capture sur l'objet window et d'empêcher sa propagation.
window.addEventListener('contextmenu',function(e) {
e.preventDefault();
},true) ;