FAQ JavaScriptConsultez toutes les FAQ
Nombre d'auteurs : 43, nombre de questions : 175, dernière mise à jour : 6 décembre 2013
Sommaire→La détection des événements- Comment remplacer une image par une autre lors du passage de la souris ?
- Comment changer la couleur de fond d'une ligne (balise <tr>) lors du passage de la souris ?
- Comment détecter l'appui sur une touche du clavier ?
- Comment récupérer les coordonnées de la souris ?
- Comment déclencher un événement à l'aide d'un script ?
- Comment ajouter un raccourci clavier ?
<img id='img' src="ImgDepart.gif" border=0
onmouseover="document.getElementById('img').src='ImgDessus.gif'"
onmouseout="document.getElementById('img').src='ImgDepart.gif'">Ici, on est en présence de deux événements :
- onmouseover --> lorsque le souris passe au dessus de l'image
- onmouseout --> lorsque la souris sort de l'image
<table border="0">
<tr onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='white'">
<td>coucou</td>
<td>re coucou</td>
</tr>
</table>Au chargement de la page, la couleur de fond est blanche (par défaut).
Lorsque l'on passe la souris dessus, elle devient rouge :
- onmouseover="this.style.backgroundColor='red'"
Lorsqu'on enlève la souris de la ligne, elle redevient blanche :
- onmouseout="this.style.backgroundColor='white'"
Voici la fonction :
function detectTouche(e){
if(parseInt(navigator.appVersion,10) >=4){
if(navigator.appName == 'Netscape'){ // Pour Netscape, firefox, ...
document.getElementById('zone').value = String.fromCharCode(e.which);
document.getElementById('zone1').value = e.which;
}
else{ // pour Internet Explorer
document.getElementById('zone').value = String.fromCharCode(e.keyCode);
document.getElementById('zone1').value = e.keyCode;
}
}
}Et voici le corps de la page :
<body onkeydown="detectTouche(event)">
<input type="text" id="zone" size="30" />
<input type="text" id="zone1" size="30" />
</body>Dans le premier champ texte, la lettre s'affichera et dans la seconde, son code ASCII associé.
Si vous souhaitez récupérer les coordonnées de la souris par rapport à la page (prise en compte du scroll) :
function detectMouse(e){
if(e){
document.getElementById('zone').innerHTML = e.pageX ;
document.getElementById('zone1').innerHTML = e.pageY;
}
else{
var monBody = document.documentElement || document.body;
document.getElementById('zone').innerHTML = window.event.x + monBody.scrollLeft;
document.getElementById('zone1').innerHTML = window.event.y + monBody.scrollTop;
}
}Si vous voulez récupérer les coordonnées par rapport à la partie visible :
function detectMouse(e){
if(!e){
e = window.event;
}
document.getElementById('zone').innerHTML = e.clientX ;
document.getElementById('zone1').innerHTML = e.clientY;
}Et voici le corps de la page :
<body onmousemove="detectMouse(event)">
<span id="zone"></span>
<span id="zone1"></span>
</body>Le premier champ affichera la coordonnée horizontale de la souris, le deuxième, la coordonnée verticale.
Ca dépend bien évidemment du navigateur.
Avec Firefox (et tout navigateur compatible DOM niveau 2) :
Exemple simple :
target.dispatchEvent("click");Où target est l'élément sur lequel a lieu l'événement.
Exemple complet (événement souris):
oEvent = document.createEvent( "MouseEvents" );
oEvent.initMouseEvent(
"click", // le type d'événement souris
true, // est-ce que l'événement doit se propager (bubbling) ?
true, // est-ce que le défaut pour cet événement peut être annulé ?
window, // l' 'AbstractView' pour cet événement
1, // details -- Pour les événements click, le nombre de clicks
1, // screenX
1, // screenY
1, // clientX
1, // clientY
false, // est-ce que la touche Ctrl est pressée ?
false, // est-ce que la touche Alt est pressée ?
false, // est-ce que la touche Shift est pressée ?
false, // est-ce que la touche Meta est pressée ?
0, // quel est le bouton pressé
target // l'élément source de cet événement
);
target.dispatchEvent( oEvent );Avec IE :
target.fireEvent( "onclick" );
Et bien entendu, ce n'est déjà pas la même syntaxe, ce ne sont pas non plus les
mêmes effets.
Sous Firefox l'événement est réel, c'est-à-dire que c'est exactement
la même chose que si vous cliquiez sur la souris. Par exemple l'événement
click
déclenché sur un lien suivra ce lien.
Sous IE, fireEvent ne déclenche que les listeners mis en place sur l'élément,
pas son comportement par défaut. Les liens ne sont par exemple pas suivis
sur un événementclick.
Théoriquement, l'attribut HTML accesskey devrait suffire, mais sur certains navigateurs, il n'a aucun effet sur les liens hypertextes. Il faut donc simuler le clic avec une petite fonction JavaScript.
Par exemple, pour activer un lien vers developpez.com à l'aide de la combinaison de touches "Alt+D" :
function akChk(e){
var event = window.event || e;
if (event.keyCode==68 && event.altKey) {
// 68 est le code décimal ASCII du caractère D
document.getElementById('developpez').click();
}
else{
return true;
}
}onkeydown="akChk(e)"<a id="developpez" href="http://www.developpez.com" accesskey="d">Aller sur Developpez.com</a>