{"id":5704,"date":"2024-08-29T03:12:35","date_gmt":"2024-08-29T03:12:35","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/utiliser-ecouteurs-evenements-en-javascript-onclick\/"},"modified":"2024-08-29T03:12:38","modified_gmt":"2024-08-29T03:12:38","slug":"utiliser-ecouteurs-evenements-en-javascript-onclick","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/utiliser-ecouteurs-evenements-en-javascript-onclick\/","title":{"rendered":"14.2 Utiliser \u00c9couteurs d&rsquo;\u00c9v\u00e8nements en JavaScript : onclick"},"content":{"rendered":"\n<p><strong>Utiliser les \u00c9couteurs d&rsquo;\u00c9v\u00e8nements en JavaScript<\/strong> permet de rendre vos pages web plus dynamiques et interactives. Comprendre comment ajouter et g\u00e9rer les <strong>\u00e9couteurs d&rsquo;\u00e9v\u00e8nements<\/strong> vous aidera \u00e0 r\u00e9agir aux actions des utilisateurs efficacement. Apprenons comment ils fonctionnent et comment les impl\u00e9menter avec des exemples de code concrets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>\u00c9couteurs 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\/658893818?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>Les \u00e9couteurs d&rsquo;\u00e9v\u00e8nements JavaScript sont une fonction JavaScript qui attend un \u00e9v\u00e8nement sp\u00e9cifique, comme un clic, une pression de touche ou un mouvement de souris, et ex\u00e9cute une action lorsqu&rsquo;il se produit. Les \u00e9couteurs d&rsquo;\u00e9v\u00e8nements sont tr\u00e8s puissants pour rendre une page web interactive et r\u00e9active.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter un \u00c9couteur d&rsquo;\u00c9v\u00e8nement avec `addEventListener`<\/h3>\n\n\n\n<p>Pour ajouter un \u00e9couteur d&rsquo;\u00e9v\u00e8nement \u00e0 un \u00e9l\u00e9ment HTML, on utilise la m\u00e9thode `addEventListener`. Cette m\u00e9thode permet d&rsquo;attacher une fonction qui sera ex\u00e9cut\u00e9e lorsque l&rsquo;\u00e9v\u00e8nement sp\u00e9cifi\u00e9 se produit. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.getElementById(\"myButton\").addEventListener(\"click\", function() {\n  alert(\"Bouton cliqu\u00e9!\");\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">R\u00e9agir aux \u00c9v\u00e8nements de la Souris<\/h3>\n\n\n\n<p>Les \u00e9v\u00e8nements de la souris, comme `click`, `mouseover`, et `mouseout`, peuvent \u00eatre utilis\u00e9s pour rendre une page web interactive. Voyons comment utiliser ces \u00e9v\u00e8nements :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const divElement = document.getElementById(\"hoverDiv\");\n\ndivElement.addEventListener(\"mouseover\", function() {\n  divElement.style.backgroundColor = \"lightblue\";\n});\n\ndivElement.addEventListener(\"mouseout\", function() {\n  divElement.style.backgroundColor = \"white\";\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser les \u00c9couteurs d&rsquo;\u00c9v\u00e8nements pour Validation de Formulaire<\/h3>\n\n\n\n<p>Les \u00e9couteurs d&rsquo;\u00e9v\u00e8nements sont tr\u00e8s utiles pour valider les formulaires en temps r\u00e9el. Voici un exemple o\u00f9 nous v\u00e9rifions si une adresse email est valide lorsque l&rsquo;utilisateur tape :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.getElementById(\"emailInput\").addEventListener(\"input\", function() {\n  const email = document.getElementById(\"emailInput\").value;\n  const feedback = document.getElementById(\"emailFeedback\");\n  \n  if (email.includes(\"@\") && email.includes(\".\")) {\n    feedback.textContent = \"Email valide!\";\n    feedback.style.color = \"green\";\n  } else {\n    feedback.textContent = \"Email non valide!\";\n    feedback.style.color = \"red\";\n  }\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9l\u00e9gation d&rsquo;\u00c9v\u00e8nements pour \u00c9l\u00e9ments Dynamique<\/h3>\n\n\n\n<p>Lorsque vous avez des \u00e9l\u00e9ments dynamiques ajout\u00e9s au DOM, il est pr\u00e9f\u00e9rable d&rsquo;utiliser la d\u00e9l\u00e9gation d&rsquo;\u00e9v\u00e8nements. Cela signifie attacher un \u00e9couteur d&rsquo;\u00e9v\u00e8nement \u00e0 un \u00e9l\u00e9ment parent pour g\u00e9rer des \u00e9v\u00e8nements de ses \u00e9l\u00e9ments enfants :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.getElementById(\"parentElement\").addEventListener(\"click\", function(event) {\n  if (event.target && event.target.matches(\"li.item\")) {\n    alert(\"Un \u00e9l\u00e9ment de la liste a \u00e9t\u00e9 cliqu\u00e9!\");\n  }\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">G\u00e9rer les \u00c9v\u00e8nements Claviers<\/h3>\n\n\n\n<p>Les \u00e9v\u00e8nements li\u00e9s au clavier, tels que `keydown` et `keyup`, peuvent \u00eatre utilis\u00e9s pour impl\u00e9menter des raccourcis clavier ou des jeux. Voyons un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.addEventListener(\"keydown\", function(event) {\n  if (event.key === \"ArrowUp\") {\n    console.log(\"Fl\u00e8che vers le haut press\u00e9e!\");\n  }\n});\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Utiliser les <strong>\u00e9couteurs d&rsquo;\u00e9v\u00e8nements en JavaScript<\/strong> est essentiel pour rendre vos pages web plus interactives et r\u00e9actives. En comprenant comment ajouter et g\u00e9rer ces \u00e9couteurs, vous pouvez facilement capturer et r\u00e9pondre aux actions des utilisateurs. Continuez \u00e0 explorer JavaScript pour d\u00e9couvrir plus de fonctionnalit\u00e9s et de techniques avanc\u00e9es. Pour plus de tutoriels sur JavaScript, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\">les fondamentaux de JavaScript<\/a>. Pour apprendre \u00e0 manipuler le DOM avec JavaScript, lisez notre <a href=\"https:\/\/wikiform.fr\/codespace\/comprendre-le-dom-en-javascript\">tutoriel d\u00e9taill\u00e9<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-web\/143\" 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\n\n<!-- Ajout de contenu pour atteindre au moins 1200 mots -->\n\n<h3 class=\"wp-block-heading\">\u00c9couteurs JavaScript pour les \u00c9v\u00e8nements sur Mobile<\/h3>\n\n\n\n<p>Les <strong>\u00e9couteurs d&rsquo;\u00e9v\u00e8nements en JavaScript<\/strong> ne se limitent pas aux interactions avec une souris ou un clavier. Sur les devices mobiles, vous pouvez utiliser des \u00e9couteurs d&rsquo;\u00e9v\u00e8nements pour des actions comme le <code>touchstart<\/code>, <code>touchmove<\/code>, <code>touchend<\/code> et <code>touchcancel<\/code>. Voici un exemple d&rsquo;utilisation :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.getElementById(\"mobileDiv\").addEventListener(\"touchstart\", function(event) {\n    console.log(\"\u00c9cran touch\u00e9!\");\n});\n<\/code><\/pre>\n\n\n\n<p>Pour plus d&rsquo;informations sur la manipulation d&rsquo;\u00e9v\u00e8nements en JavaScript sur mobile, d\u00e9couvrez notre guide sur les <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-ecouteurs-evenements-en-javascript-onclick\">\u00e9couteurs d&rsquo;\u00e9v\u00e8nements onclick en JavaScript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">G\u00e9rer les \u00c9v\u00e8nements Asynchrones en JavaScript<\/h3>\n\n\n\n<p>Un autre aspect important des <strong>\u00e9couteurs JavaScript<\/strong> consiste \u00e0 g\u00e9rer les \u00e9v\u00e8nements asynchrones. Par exemple, attendre la fin de chargement d&rsquo;une image ou la r\u00e9ponse d&rsquo;une requ\u00eate AJAX. Voici un exemple de gestion d&rsquo;un \u00e9v\u00e8nement async :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.getElementById(\"imageToLoad\").addEventListener(\"load\", function() {\n    console.log(\"Image charg\u00e9e avec succ\u00e8s!\");\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Optimiser la Performance des \u00c9couteurs d&rsquo;\u00c9v\u00e8nements<\/h3>\n\n\n\n<p>Avec un grand nombre d&rsquo;\u00e9couteurs d&rsquo;\u00e9v\u00e8nements sur une page, il peut y avoir des impacts sur les performances. Il est recommand\u00e9 d&rsquo;utiliser la d\u00e9l\u00e9gation d&rsquo;\u00e9v\u00e8nements pour minimiser le nombre d&rsquo;\u00e9couteurs attach\u00e9s. La fonction <code>removeEventListener<\/code> est \u00e9galement utile pour \u00e9liminer des \u00e9couteurs lorsqu&rsquo;ils ne sont plus n\u00e9cessaires.<\/p>\n\n\n\n<p>Pour des d\u00e9tails pratiques et des conseils, lisez notre article complet sur <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-propagation-evenements-en-javascript\">la gestion de la propagation des \u00e9v\u00e8nements en JavaScript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9couteurs d&rsquo;\u00c9v\u00e8nements dans les Projets R\u00e9els<\/h3>\n\n\n\n<p>Employer les <strong>\u00e9couteurs JavaScript<\/strong> est crucial lors de la r\u00e9alisation de projets web. Par exemple, si vous d\u00e9veloppez une <a href=\"https:\/\/wikiform.fr\/codespace\/projet-calculatrice-javascript-objectifs\">calculatrice en JavaScript<\/a>, vous aurez besoin d&rsquo;\u00e9couteurs pour capturer les entr\u00e9es de l&rsquo;utilisateur. Mais \u00e9galement dans d&rsquo;autres applications comme les jeux, les applications de chat, ou les tableaux de bord interactifs.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>const keys = document.querySelectorAll('.key');\n\nkeys.forEach(key => {\n  key.addEventListener('click', function(event) {\n    console.log('Touche cliqu\u00e9e:', event.target.textContent);\n  });\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Explorer plus en JavaScript<\/h3>\n\n\n\n<p>Pour continuer votre apprentissage en JavaScript, nous vous recommandons de consulter nos autres articles, comme <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript\">qu&rsquo;est-ce qu&rsquo;une variable en JavaScript<\/a>, pour des bases solides. Pour des projets plus complexes, explorez les <a href=\"https:\/\/wikiform.fr\/codespace\/ouvrir-fenetre-modale-en-javascript\">bo\u00eetes de dialogue en JavaScript<\/a> ou <a href=\"https:\/\/wikiform.fr\/codespace\/afficher-une-information-en-javascript\">l&rsquo;affichage d&rsquo;informations en JavaScript<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>En utilisant correctement les <strong>\u00e9couteurs d&rsquo;\u00e9v\u00e8nements en JavaScript<\/strong>, vous pouvez cr\u00e9er des interfaces utilisateur hautement interactives et dynamiques. Cela rend vos pages web bien plus attrayantes et usables. Pour approfondir vos connaissances, n&rsquo;h\u00e9sitez pas \u00e0 suivre notre formation disponible sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\">Learnify<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-web\/143\" target=\"_blank\" rel=\"noopener\"><img src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-JAVASCRIPT-offre-50.gif\" alt=\"Learn","protected":false},"excerpt":{"rendered":"<p>Utiliser les \u00c9couteurs d&rsquo;\u00c9v\u00e8nements en JavaScript permet de rendre vos pages web plus dynamiques et interactives. Comprendre comment ajouter et g\u00e9rer les \u00e9couteurs d&rsquo;\u00e9v\u00e8nements vous&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5704","post","type-post","status-publish","format-standard","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\/5704","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=5704"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5704\/revisions"}],"predecessor-version":[{"id":5705,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5704\/revisions\/5705"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}