Événements jQuery

jQuery est spécialement conçu pour la gestion des événements.

Fonction d'événement jQuery

Les méthodes de gestion des événements jQuery sont les fonctions centrales de jQuery.

Un programmeur d'événement est une méthode appelée lorsque certains événements se produisent dans le HTML. Le terme "déclenché" (ou "déclenché") par l'événement est souvent utilisé.

Il est généralement conseillé de placer le code jQuery dans les méthodes de gestion des événements de la section <head> :

Exemple

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<h2>Ceci est un en-tête</h2>
<p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p>
<button>Cliquez-moi</button>
</body>
</html>

Essayez-le vous-même

Dans cet exemple, une fonction est appelée lorsque l'événement de clic sur le bouton est déclenché :

$("button").click(function() {  // some code... } )

Cette méthode cache tous les éléments <p> :

$("p").hide();

Fonctions dans un fichier séparé

Si votre site web contient de nombreuses pages et que vous souhaitez que vos fonctions jQuery soient faciles à maintenir, placez vos fonctions jQuery dans un fichier .js indépendant.

Lorsque nous démontrons jQuery dans les tutoriels, nous ajoutons directement les fonctions à la section <head>. Cependant, il serait mieux de les mettre dans un fichier séparé, comme ceci (en utilisant l'attribut src pour référencer le fichier) :

Exemple

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

Conflit de nom de jQuery

jQuery utilise le symbole $ comme une manière de présenter jQuery.

Les fonctions de certaines autres bibliothèques JavaScript (comme Prototype) utilisent également le symbole $.

jQuery utilise la méthode noConflict() pour résoudre ce problème.

var jq=jQuery.noConflict(), ce qui vous permet d'utiliser votre propre nom (par exemple jq) au lieu du symbole $.

Essayez-le vous-même

Conclusion

Comme jQuery est spécialement conçu pour gérer les événements HTML, votre code sera plus approprié et plus facile à maintenir si vous suivez les principes suivants :

  • Placez tout le code jQuery dans la fonction de gestion des événements
  • Placez toutes les fonctions de gestion des événements dans le gestionnaire d'événement de prêt du document
  • Placez le code jQuery dans un fichier .js séparé
  • Si il y a un conflit de nom, renommez la bibliothèque jQuery

Événements jQuery

Voici quelques exemples de méthodes d'événements dans jQuery :

Fonction événement Lier une fonction à
$(document).ready(function) Lier une fonction à l'événement de prêt du document (quand le document est chargé)
$(selector).click(function) Déclencher ou lier une fonction à l'événement de clic sur l'élément sélectionné
$(selector).dblclick(function) Déclencher ou lier une fonction à l'événement de double-clic sur l'élément sélectionné
$(selector).focus(function) Déclencher ou lier une fonction à l'événement de focus de l'élément sélectionné
$(selector).mouseover(function) Déclencher ou lier une fonction à l'événement de survol de la souris sur l'élément sélectionné

Pour un manuel de référence complet, veuillez visiter notre Manuel de référence des événements jQuery.