Gestion des événements
Gestion des événements
Gestion des événements est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 1. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 1 leçons au total.
Introduction
Bonjour,
En présentant jQuery, nous avons indiqué qu’il ne permettait pas seulement la manipulation du DOM, mais qu’il offrait également une fonctionnalité importante comme la gestion des événements.
Qu’est-ce qu’un événement
Commençons par apprendre ce qu’est un événement.
Les événements sont principalement générés par l’utilisateur dans le navigateur web.
Nous pouvons définir de nombreux événements déclenchés par l’utilisateur, comme toucher l’écran sur un appareil mobile, déplacer la souris, cliquer sur un bouton ou faire défiler la page.
Comme JavaScript est un langage de programmation, nous gérerons le déroulement de notre programme en fonction des événements qui se produisent.
Clic
Méthode click()
Commençons par l’événement le plus simple, le clic sur un bouton.
La méthode click() sert à gérer les événements de clic en HTML.
Nous pouvons écouter l’événement de clic avec la syntaxe ci-dessous.
$(selector).click(handler);
- Avec $(selector), nous choisissons l’élément à écouter.
- Le gestionnaire représente la fonction de rappel qui sera exécutée en cas de clic.
Créons un exemple.
<button>Button</button>
<script>
/* Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
$('button').click(function(){
alert('Button clicked');
});
})
</script>Avertissement
La méthode click gère le clic sur le bouton avec la fonction anonyme qu’elle reçoit comme argument.
Double clic
Événements de souris
Voici quelques événements que l’utilisateur peut déclencher avec la souris.
Cliquons sur le bouton !
<button>Coddy Button</button>
<script>
// runs when button is click
$("button").click(function(){
$('button').text('Clicked')
});
// runs when button is double click
$("button").dblclick(function(){
$('button').text('Double Clicked')
});
</script>Événements de souris
Notez que certains événements ne peuvent pas être testés dans l’application mobile, car des événements comme Hover ne peuvent pas être effectués sur les appareils mobiles !
<button>Coddy Button</button>
<script>
/* It runs when the mouse
hovers over the button
*/
$("button").hover(function(){
$('button').text('Hovering...')
});
/*
It runs when the mouse
enters an element
*/
$("button").mouseenter(function(){
$('button').text('Mouse enter...')
});
/*
It runs when the mouse leaves
an element
*/
$("button").mouseleave(function(){
$('button').text('Mouse Leave...')
});
</script>Événements du clavier
Événements du clavier
Nous allons maintenant apprendre à gérer les événements du clavier.
Commençons par définir un champ de saisie, puis gérons les événements générés par ce champ.
<input type="text" id="name"
name="yourname"
placeholder="Enter your name" />
<p>Keyboard event: <span id="state"></span></p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
/*
It runs every time we press
the keyboard key on the keyboard.
*/
$('#name').keydown(function(){
$('#state').text('Key down')
});
/*
It runs when we take our finger
off the keyboard key
*/
$('#name').keyup(function(){
$('#state').text('Key up')
});
// Runs when the user focuses on input.
$('#name').focus(function(){
$('#state').text('Focus')
});
/*
It works when we unfocus
from an input on the keyboard.
*/
$('#name').blur(function(){
$('#state').text('Blur')
});
})
</script>Événements de formulaire
Avec jQuery, nous pouvons également gérer les événements qui se produisent dans les formulaires.
La saisie de données dans un champ ou la sélection d’une option dans une liste déroulante sont des événements de formulaire.
Exemple d’événements de formulaire
Dans le code ci-dessous, plusieurs événements de formulaire sont présentés.
*
listen to the form with the coddyForm
id and run when submit button clicked
*/
$("#coddyForm").submit(
function(event){
});Événements de window
Enfin, examinons les événements de window.
L’événement de window le plus important est peut-être $(document).ready(), mais comme nous avons déjà étudié cet événement, nous allons en découvrir d’autres.
Méthode resize
Méthode resize()
La méthode resize est liée à l’objet window du navigateur et est déclenchée lorsque la taille de la fenêtre change.
const window = {};
const $ = (obj) => ({
resize: (callback) => {
console.log("Resize event handler would be attached here.");
}
});
$(window).resize(function() {
//trigging when user change windows size
});Méthode scroll
Méthode scroll()
La méthode scroll() se lie à un élément défilable ou à un objet window et est déclenchée lorsque l’utilisateur fait défiler le composant correspondant.
$(window).scroll(function() {
//Calling when user scroll the window
});
$('#my-scrollable-element').scroll(function() {
//Calling when user scroll the cursor
//that inside the #my-scrollable-element element
});Félicitations
Félicitations 🎉
Nous avons appris la gestion des événements avec jQuery.
Dans la section suivante, nous apprendrons la leçon sur la création d’animations avec jQuery.
Questions Fréquemment Posées
La leçon « Gestion des événements » est-elle gratuite ?
Oui — le texte complet de « Gestion des événements » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 1 leçons au total.
Qu'est-ce que j'apprendrai dans « Gestion des événements » ?
Gestion des événements Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer jQuery Academy ?
Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 1.
Combien de temps prend la leçon « Gestion des événements » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?
Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.