FAQ JavaScriptConsultez toutes les FAQ

Nombre d'auteurs : 43, nombre de questions : 176, dernière mise à jour : 19 décembre 2013 

 
OuvrirSommaireLa détection des événements
 
Sélectionnez
<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

Créé le 13 août 2003  par simone.51
 
Sélectionnez
<table border="0">
    <tr onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='white'">
        <td>coucou&lt;/td>
        <td>re coucou&lt;/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'"

Créé le 13 août 2003  par simone.51

Voici la fonction :

 
Sélectionnez
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 :

 
Sélectionnez
<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é.

Créé le 25 septembre 2003  par simone.51

Si vous souhaitez récupérer les coordonnées de la souris par rapport à la page (prise en compte du scroll) :

 
Sélectionnez
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 :

 
Sélectionnez
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 :

 
Sélectionnez
<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.

Mis à jour le 1er avril 2009  par simone.51, Bovino

Lien : Exemple d'utilisation de ce script

Ca dépend bien évidemment du navigateur.

Avec Firefox (et tout navigateur compatible DOM niveau 2) :

Exemple simple :

 
Sélectionnez
target.dispatchEvent("click");

target est l'élément sur lequel a lieu l'événement.

Exemple complet (événement souris):

 
Sélectionnez
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 :

 
Sélectionnez
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.

Créé le 31 janvier 2006  par denisC

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" :

A placer dans le head
Sélectionnez
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;
	}
}
A placer dans la balise body
Sélectionnez
onkeydown="akChk(e)"
Le lien :
Sélectionnez
<a id="developpez" href="http://www.developpez.com" accesskey="d">Aller sur Developpez.com</a>
Créé le 2 mars 2009  par Jérôme
  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.