Les interactions utilisateur sur les pages Web manquent souvent de dynamisme et d’interactivité.
Cela peut conduire à une expérience utilisateur insatisfaisante, réduisant l’engagement et l’intérêt pour le contenu.
Découvrez comment les méthodes d’événements jQuery peuvent transformer vos pages Web en expériences interactives et engageantes.
Apprenez les bases de jQuery à travers des projets pratiques et engageants.
Les événements sont souvent déclenchés par l’interaction de l’utilisateur avec la page Web, par exemple lorsqu’un lien ou un bouton est cliqué, du texte est saisi dans une zone de saisie ou une zone de texte, une sélection est effectuée dans une zone de sélection, une touche est enfoncée sur le clavier, le pointeur de la souris est déplacé, etc. Dans certains cas, le navigateur lui-même peut déclencher les événements, tels que les événements de chargement et de déchargement de la page.
jQuery améliore les mécanismes de gestion des événements de base en proposant les méthodes d’événements pour la plupart des événements de navigateur natifs. Certaines de ces méthodes sont « click() », « mouseenter() », « hover() », etc.
En général, les événements peuvent être classés en quatre groupes principaux : les événements de souris, les événements de clavier, les événements de formulaire, et les événements de document/fenêtre. Dans notre chapitre, nous allons explorer les événements de la souris.
Un événement de souris est déclenché lorsque l’utilisateur clique sur un élément, déplace le pointeur de la souris, etc. Nous allons donc ensemble parcourir les différents événements de jQuery liés à la souris. Allez, prêt ? On y va !
Méthode d'événement click jQuery
La méthode jQuery click() attache une fonction de gestionnaire d’événements aux éléments sélectionnés pour l’événement « click ». La fonction attachée est exécutée lorsque l’utilisateur clique sur cet élément. L’exemple suivant cachera l’élément bouton « click-moi ! » de votre page web lorsqu’il sera cliqué.
Vous allez de ce part écrire votre code HTML, il devrait ressembler à ça :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
<link rel="stylesheet" href="css/style.css">
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.jet-image-accordion__item-loader span{--wpr-bg-fe095fae-0595-42be-b824-88a7fb218f7c: url('https://blog.alphorm.com/wp-content/plugins/jet-tabs/assets/images/spinner-32.svg');}.rll-youtube-player .play{--wpr-bg-4c6c0478-65c0-462c-bb5a-6bef759f0322: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".jet-image-accordion__item-loader span","style":".jet-image-accordion__item-loader span{--wpr-bg-fe095fae-0595-42be-b824-88a7fb218f7c: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg');}","hash":"fe095fae-0595-42be-b824-88a7fb218f7c","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-4c6c0478-65c0-462c-bb5a-6bef759f0322: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"4c6c0478-65c0-462c-bb5a-6bef759f0322","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<button>Clic-moi !</button>
<script src="js/jquery.js" data-rocket-defer defer></script>
<script src="js/script.js" data-rocket-defer defer></script>
<script>window.addEventListener('DOMContentLoaded', function() {var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"09adbf3af4","url":"https:\/\/blog.alphorm.com\/meilleures-methodes-evenements-jquery","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}});</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Vous aurez sans grande surprise le résultat suivant dans votre navigateur :
Dans l’exploitation de la méthode d’événement click() , vous aurez l’occasion de voir la magie de jQuery.
Pour exploiter l’événement « click », il vous faudra crée un fichier « script.js » dans lequel vous indiquerez qu’au clic du bouton, celui-ci devrait être caché.
Vous avez ici le code nécessaire pour faire cela :
$(document).ready(function() {
$('button').click(function(){
$('button').hide();
});
});
Une fois dans votre navigateur, vous actualisez votre page et au clic donc du bouton, bim celui-ci disparait.
Qu’est-ce que vous constatez ? une page vierge. Et ben c’est ça le rôle de la méthode d’événement click() , faire une action dès qu’un bouton est cliqué.
Une autre manière de passer le sélecteur « boutton » à la méthode « hide() » est de l’appeler avec « this ».
$(document).ready(function() {
$('button').click(function(){
$('this').hide();
});
});
Un autre exemple sur l’événement « click » et cette fois avec alert :
$(document).ready(function() {
$('button').click(function(){
alert('Tu as cliqué sur le bouton !');
});
});
Ici, votre page web indiquera une « alert » c’est- à – dire le message affiché dans l’encadré noir à la suite du clic du bouton.
Dans ces deux exemples, vous avez pu exploiter les principales fonctions de la méthode d’événement « click ». Vous vous rendez compte qu’avec la méthode d’événement click(), vous pouvez faire des choses extraordinaires.
Méthode dblclick jQuery expliquée
La méthode jQuery dblclick() attache une fonction de gestionnaire d’événements aux éléments sélectionnés pour l’événement dblclick . La fonction attachée est exécutée lorsque l’utilisateur double-clique sur cet élément. L’exemple suivant changera la couleur de l’élément « boutton » en rouge lorsqu’il sera double-cliqué.
Voici donc le code pour bien illustrer l’exemple :
$(document).ready(function() {
$('button').click(function(){
$(this).css('color', 'red');
});
});
Ici, on a ajouté au mot clé « this » qui fait référence au selecteur « boutton » une propriété css pour définir la couleur à afficher.
Au double-clic donc du bouton, vous verrez un changement au niveau de la couleur de votre bouton :
Au travers donc de cet exemple, vous avez pu voir comment utiliser la méthode dblclick().
Maîtriser les méthodes d’événement mouseenter et mouseleave
La méthode mouseenter
La méthode jQuery mouseenter() attache une fonction de gestionnaire d’événements aux éléments sélectionnés qui est exécutée lorsque la souris entre dans un élément. L’exemple suivant changera la couleur de l’élément « div » lorsque vous placez le curseur dessus.
Code HTML:
<body>
<div></div>
<script src="js/jquery.js" data-rocket-defer defer></script>
<script src="js/script.js" data-rocket-defer defer></script>
<script>window.addEventListener('DOMContentLoaded', function() {var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"09adbf3af4","url":"https:\/\/blog.alphorm.com\/meilleures-methodes-evenements-jquery","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}});</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
Code CSS:
div{
width: 250px;
height: 250px;
background-color: #f00;
}
Code JavaScript :
$(document).ready(function() {
$('div').mouseenter(function(){
$(this).css('background-color', 'yellow');
});
});
Une fois le curseur passé sur la boîte div, sa couleur changera automatiquement.
Impressionnant le résultat !
La méthode mouseenter() est un moyen simple et efficace d’ajouter de l’interactivité à une page Web à l’aide de jQuery. En utilisant cette méthode, vous pourrez facilement créer des effets dynamiques qui répondent aux interactions de l’utilisateur avec la souris lorsque le pointeur entre dans un élément.
La méthode mouseleave
La méthode jQuery mouseleave() attache une fonction de gestionnaire d’événements aux éléments sélectionnés qui est exécutée lorsque la souris quitte un élément. L’exemple suivant remet la couleur rouge à l’élément « div » lorsque vous en retirez le curseur.
Vous allez donc ajouter au code JavaScript le script de la méthode mouseleave.
$('div').mouseleave(function(){
$(this).css('background-color', 'red');
});
Vous verrez que lorsque vous retirerez le curseur sur la boîte div, elle redeviendra rouge
Dans cet exemple, vous avez pu constater que la méthode d’événement mouseleave() est utilisée pour lier une fonction à un élément, à exécuter lorsque le pointeur de la souris quitte l’élément.
Gestion hover avec événements jQuery
La méthode jQuery hover() attache une ou deux fonctions de gestion d’événements aux éléments sélectionnés qui sont exécutées lorsque le pointeur de la souris entre et sort des éléments. La première fonction est exécutée lorsque l’utilisateur place le pointeur de la souris sur un élément, tandis que la deuxième fonction est exécutée lorsque l’utilisateur retire le pointeur de la souris de cet élément.
Tout comme l’exemple précédent, l’élément « div » sera de couleur jaune lorsque vous placerez le curseur dessus, et rouge lorsque vous l’en retirerez le curseur.
Vous avez ici le code JavaScript pour réaliser cela :
$(document).ready(function() {
$('div').hover(function(){
$(this).css('background-color', 'yellow');
}, function(){
$(this).css('background-color', 'red');
});
});
La méthode hover() est un moyen simple et efficace d’ajouter de l’interactivité à une page Web à l’aide de jQuery. L’utilisation de cette méthode vous permettrait facilement de créer des effets dynamiques qui répondent aux interactions de l’utilisateur avec la souris.
Gérer mousedown et mouseup jQuery
L’événement mousedown
L’événement jQuery mousedown() est déclenché lorsqu’un bouton de la souris est enfoncé sur l’élément sélectionné. Vous pouvez utiliser cet événement pour effectuer des actions chaque fois qu’un utilisateur clique ou appuie sur un élément avec un bouton de la souris.
Toujours avec le même exemple du « div », modifiez votre script avec l’ajout de l’événement mousedown().
$(document).ready(function() {
let div = $('div');
div.mousedown(function(){
$(this).css('border-radius', '50%');
});
});
Lorsque le bouton de la souris sera enfoncé sur la boîte div auparavant carrée, elle deviendra ronde. Voyez vous-même la puissance de jQuery à travers ses méthodes d’événements.
L’événement mouseup
L’événement mouseup() dans jQuery est déclenché lorsqu’un bouton de la souris est relâché après avoir été appuyé sur un élément. Cet événement est généralement utilisé en conjonction avec l’événement mousedown() pour implémenter la fonctionnalité glisser-déposer, les contrôles de bouton ou d’autres éléments interactifs.
Vous ajouterez donc le code suivant à votre fichier JavaScript pour mieux voir l’effet du glisser-déposer de la boîte div.
div.mouseup(function(){
$(this).css('border-radius', '0%');
});
Avec l’ajout de ce bout de code à votre script, vous remarquerez que lorsque vous relâchez le bouton du curseur de la souris, votre boîte div redeviendra à sa forme initiale.
Suivre mousemove avec jQuery
Dans jQuery, la méthode mousemove() permet de lier une fonction à un élément, à exécuter à chaque fois que le pointeur de la souris passe sur l’élément. Cet événement peut être utilisé pour suivre le mouvement de la souris, pour créer des éléments interactifs ou pour implémenter des animations et des effets. L’exemple suivant vous permettra de capter la position de la souris en temps réel.
Code HTML:
<body>
<p></p>
<script src="js/jquery.js" data-rocket-defer defer></script>
<script src="js/script.js" data-rocket-defer defer></script>
<script>window.addEventListener('DOMContentLoaded', function() {var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"09adbf3af4","url":"https:\/\/blog.alphorm.com\/meilleures-methodes-evenements-jquery","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}});</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
Code JavaScript:
$(document).ready(function() {
$(document).mousemove(function(event){
let x = event.pageX;
let y = event.pageY;
$('p').text('La position de la souris : '+x+','+y+'');
});
});
Vous attendez à une surprise ? Et ben observez la magie de jQuery encore s’opérer.
Vous remarquerez que chaque fois que vous déplacerez le curseur de la souris, les coordonnées aussi vont changer. Quel dynamisme !
La méthode mousemove() est une méthode événementielle puissante dans jQuery qui permet aux développeurs de suivre le mouvement de la souris, de créer des éléments interactifs ou d’implémenter des animations et des effets. En utilisant cette méthode, les développeurs peuvent facilement créer des effets de suivi de la souris, implémenter des animations et des effets ou effectuer toute autre action qui doit être déclenchée lorsque le pointeur de la souris se déplace sur un élément.
Méthode | Description |
|---|---|
.click() | Attache un gestionnaire d’événements pour l’événement click ou déclenche cet événement sur un élément sélectionné. |
.dblclick() | Attache un gestionnaire d’événements pour l’événement dblclick ou déclenche cet événement sur un élément sélectionné. |
.mouseenter() | Attache un gestionnaire d’événements pour l’événement mouseenter (lorsque la souris entre dans les limites d’un élément). |
.mouseleave() | Attache un gestionnaire d’événements pour l’événement mouseleave (lorsque la souris quitte les limites d’un élément). |
.hover() | Attache des gestionnaires d’événements pour les événements mouseenter et mouseleave. |
.mousedown() | Attache un gestionnaire d’événements pour l’événement mousedown (lorsqu’un bouton de la souris est enfoncé sur un élément). |
.mouseup() | Attache un gestionnaire d’événements pour l’événement mouseup (lorsqu’un bouton de la souris est relâché sur un élément). |
.mousemove() | Attache un gestionnaire d’événements pour l’événement mouseup (lorsqu’un bouton de la souris est relâché sur un élément). |
En résumé, les méthodes de jQuery liées à la souris améliorent collectivement l’interactivité des éléments Web en répondant aux événements de la souris. En utilisant la syntaxe simple de jQuery, vous pouvez implémenter des comportements sophistiqués avec un minimum de code.
Découvrez ci-dessous un aperçu interactif des animations grâce à l’intégration du CodePen, où vous pouvez tester et explorer le code directement :
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment utiliser la méthode click en jQuery ?
Qu'est-ce que la méthode dblclick en jQuery ?
Comment fonctionne la méthode mouseenter en jQuery ?
Comment utiliser la méthode hover en jQuery ?
Quel est l'usage de la méthode mousemove en jQuery ?
Conclusion
En explorant les méthodes d’événements jQuery, vous avez découvert comment améliorer l’interactivité de vos pages Web. Quelles autres méthodes pourriez-vous explorer pour enrichir davantage l’expérience utilisateur ?
