{"id":5708,"date":"2024-08-29T03:20:17","date_gmt":"2024-08-29T03:20:17","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/ecouteurs-par-gestionnaire-evenements-en-javascript\/"},"modified":"2024-08-29T03:20:20","modified_gmt":"2024-08-29T03:20:20","slug":"ecouteurs-par-gestionnaire-evenements-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/ecouteurs-par-gestionnaire-evenements-en-javascript\/","title":{"rendered":"14.4 \u00c9couteurs par Gestionnaire d&rsquo;\u00c9v\u00e8nements en JavaScript"},"content":{"rendered":"\n<p><strong>14.4 \u00c9couteurs par Gestionnaire d&rsquo;\u00c9v\u00e8nements en JavaScript<\/strong> sont essentiels pour cr\u00e9er des interactions dynamiques et r\u00e9actives dans vos applications web. Savoir comment les mettre en place et les utiliser avec efficacit\u00e9 peut consid\u00e9rablement am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur. Explorons leur fonctionnement et leur utilisation \u00e0 travers des exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>\u00c9couteurs par Gestionnaire d&rsquo;\u00c9v\u00e8nements en JavaScript<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/658894101?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>En JavaScript, un \u00e9couteur d&rsquo;\u00e9v\u00e8nement (event listener) est un moyen de surveiller les interactions utilisateur comme les clics, les survols de souris, les frappes clavier, etc. Lorsque l&rsquo;\u00e9v\u00e8nement se produit, toutes les fonctions de rappel enregistr\u00e9es (callbacks) sont automatiquement d\u00e9clench\u00e9es, permettant de r\u00e9agir aux actions de l&rsquo;utilisateur de mani\u00e8re dynamique.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des \u00c9couteurs d&rsquo;\u00c9v\u00e8nements en JavaScript<\/h3>\n\n\n\n<p>Commen\u00e7ons par ajouter un \u00e9couteur d&rsquo;\u00e9v\u00e8nement \u00e0 un \u00e9l\u00e9ment HTML. JavaScript propose des m\u00e9thodes telles que <code>addEventListener<\/code> pour attacher des gestionnaires d&rsquo;\u00e9v\u00e8nements. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ S\u00e9lectionner l'\u00e9l\u00e9ment\nconst button = document.querySelector(\"button\");\n\n\/\/ Ajouter un \u00e9couteur pour l'\u00e9v\u00e8nement 'click'\nbutton.addEventListener(\"click\", function() {\n    alert(\"Bouton cliqu\u00e9!\");\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestionnaire \u00c9v\u00e8nements Souris &#8211; Avantages et Utilisations<\/h3>\n\n\n\n<p>Les \u00e9v\u00e8nements de souris sont parmi les plus couramment utilis\u00e9s comme <code>click<\/code>, <code>mouseover<\/code>, <code>mouseout<\/code> et <code>mousemove<\/code>. Ils permettent de rendre une page web plus interactive et r\u00e9active aux actions utilisateur. Voici comment les utiliser :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ S\u00e9lectionner l'\u00e9l\u00e9ment\nconst div = document.querySelector(\"div\");\n\n\/\/ Ajouter un \u00e9couteur pour l'\u00e9v\u00e8nement 'mouseover'\ndiv.addEventListener(\"mouseover\", function() {\n    div.style.backgroundColor = \"lightblue\";\n});\n\n\/\/ Ajouter un \u00e9couteur pour l'\u00e9v\u00e8nement 'mouseout'\ndiv.addEventListener(\"mouseout\", function() {\n    div.style.backgroundColor = \"\";\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestionnaire \u00c9v\u00e8nements Clavier<\/h3>\n\n\n\n<p>Les \u00e9v\u00e8nements clavier comme <code>keydown<\/code>, <code>keyup<\/code> et <code>keypress<\/code> sont tr\u00e8s utiles pour les interactions utilisateur dans les formulaires ou les raccourcis clavier. Ces \u00e9v\u00e8nements permettent une interaction plus fluide avec l&rsquo;utilisateur finale.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ S\u00e9lectionner l'\u00e9l\u00e9ment de saisie\nconst input = document.querySelector(\"input\");\n\n\/\/ Ajouter un \u00e9couteur pour l'\u00e9v\u00e8nement 'keydown'\ninput.addEventListener(\"keydown\", function(event) {\n    console.log(\"Touche appuy\u00e9e: \" + event.key);\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestionnaire \u00c9v\u00e8nements Formulaire &#8211; Validation en Temps R\u00e9el<\/h3>\n\n\n\n<p>Les \u00e9couteurs d&rsquo;\u00e9v\u00e8nements sont essentiels pour la gestion des formulaires, en particulier pour la validation en temps r\u00e9el. Voyons comment valider une entr\u00e9e d&#8217;email sur l&rsquo;\u00e9v\u00e8nement <code>input<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ S\u00e9lectionner l'entr\u00e9e et le message\nconst emailInput = document.querySelector(\"#email\");\nconst message = document.querySelector(\"#message\");\n\n\/\/ Ajouter un \u00e9couteur pour l'\u00e9v\u00e8nement 'input'\nemailInput.addEventListener(\"input\", function() {\n    const email = emailInput.value;\n    \n    if (\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email)) {\n        message.textContent = \"Adresse email valide\";\n        message.style.color = \"green\";\n    } else {\n        message.textContent = \"Adresse email invalide\";\n        message.style.color = \"red\";\n    }\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9couter des \u00c9v\u00e8nements Personnalis\u00e9s<\/h3>\n\n\n\n<p>JavaScript permet \u00e9galement de cr\u00e9er et d&rsquo;\u00e9couter des \u00e9v\u00e8nements personnalis\u00e9s pour des interactions plus sp\u00e9cifiques dans des applications complexes :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ Cr\u00e9er un nouvel \u00e9v\u00e8nement\nconst customEvent = new Event('monEvenement');\n\n\/\/ S\u00e9lectionner l'\u00e9l\u00e9ment\nconst elem = document.querySelector(\"div\");\n\n\/\/ Ajouter un \u00e9couteur pour l'\u00e9v\u00e8nement personnalis\u00e9\nelem.addEventListener('monEvenement', function() {\n    console.log(\"Mon \u00e9v\u00e8nement personnalis\u00e9 a \u00e9t\u00e9 d\u00e9clench\u00e9\");\n});\n\n\/\/ D\u00e9clencher l'\u00e9v\u00e8nement personnalis\u00e9\nelem.dispatchEvent(customEvent);\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Les <strong>\u00e9couteurs par gestionnaire d&rsquo;\u00e9v\u00e8nements en JavaScript<\/strong> sont une technique puissante pour rendre vos applications web plus dynamiques et interactives. En surveillant les interactions utilisateur, vous pouvez facilement mettre \u00e0 jour l&rsquo;interface utilisateur, valider les entr\u00e9es en temps r\u00e9el et ex\u00e9cuter des actions sp\u00e9cifiques. Continuez \u00e0 explorer JavaScript pour ma\u00eetriser davantage les \u00e9v\u00e8nements et autres fonctionnalit\u00e9s avanc\u00e9es. Pour plus de tutoriels sur JavaScript, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-interm\u00e9diaire-avanc\u00e9\/150\">les fonctionnalit\u00e9s interm\u00e9diaires et avanc\u00e9es de JavaScript<\/a>. Si vous \u00eates d\u00e9butant, d\u00e9couvrir <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\">les bases de JavaScript<\/a> peut \u00eatre un bon point de d\u00e9part. Enfin, pour ma\u00eetriser les outils n\u00e9cessaires, voyez notre ressource sur les <a href=\"https:\/\/wikiform.fr\/codespace\/logiciels-pour-javascript-meilleurs-outils\">meilleurs logiciels pour JavaScript<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JAVASCRIPT-offre-50.gif\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JAVASCRIPT-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation JavaScript Offre 50%\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>14.4 \u00c9couteurs par Gestionnaire d&rsquo;\u00c9v\u00e8nements en JavaScript sont essentiels pour cr\u00e9er des interactions dynamiques et r\u00e9actives dans vos applications web. Savoir comment les mettre en&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2874,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5708","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-4-javascript","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5708","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5708"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5708\/revisions"}],"predecessor-version":[{"id":5709,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5708\/revisions\/5709"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2874"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}