{"id":5710,"date":"2024-08-29T03:23:59","date_gmt":"2024-08-29T03:23:59","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/gerer-propagation-evenements-en-javascript\/"},"modified":"2025-01-16T12:34:14","modified_gmt":"2025-01-16T12:34:14","slug":"gerer-propagation-evenements-en-javascript","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/gerer-propagation-evenements-en-javascript\/","title":{"rendered":"14.5 G\u00e9rer Propagation des \u00c9v\u00e8nements en JavaScript"},"content":{"rendered":"\n\n\n<p><strong>Propager les \u00c9v\u00e8nements en JavaScript<\/strong> est crucial pour d\u00e9velopper des interfaces web interactives et performantes. Ma\u00eetriser les concepts de propagation des \u00e9v\u00e8nements et savoir les contr\u00f4ler peut significativement am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur. Apprenons ensemble comment cela fonctionne et comment l&rsquo;impl\u00e9menter au travers d&rsquo;exemples concrets de code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>Propagation des \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\/658894157?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;\">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>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>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, la <em>propagation des \u00e9v\u00e8nements<\/em> d\u00e9signe le chemin suivi par un \u00e9v\u00e8nement depuis son d\u00e9clenchement jusqu&rsquo;\u00e0 sa phase finale dans le DOM. Comprendre ce processus permet de mieux g\u00e9rer la manipulation et l&rsquo;interception des \u00e9v\u00e8nements afin de personnaliser le comportement de votre application. Pour une meilleure compr\u00e9hension des concepts fondamentaux de JavaScript, consultez notre section sur <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-que-javascript-explications-definition\" target=\"_blank\" rel=\"noopener\">Qu&rsquo;est-ce que JavaScript : Explications et D\u00e9finitions<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Les Phases de la Propagation des \u00c9v\u00e8nements<\/h3>\n\n\n\n<p><p>La propagation des \u00e9v\u00e8nements en JavaScript se d\u00e9roule en trois phases :<\/p>\n<ol>\n  <li><strong>Capture<\/strong> : L&rsquo;\u00e9v\u00e8nement traverse le DOM depuis la racine jusqu&rsquo;\u00e0 l&rsquo;\u00e9l\u00e9ment cible.<\/li>\n  <li><strong>Target<\/strong> : L&rsquo;\u00e9v\u00e8nement atteint l&rsquo;\u00e9l\u00e9ment cible.<\/li>\n  <li><strong>Bubbling<\/strong> : L&rsquo;\u00e9v\u00e8nement remonte de l&rsquo;\u00e9l\u00e9ment cible vers la racine du DOM.<\/li>\n<\/ol><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemple Pratique de Propagation des \u00c9v\u00e8nements<\/h3>\n\n\n\n<p>Consid\u00e9rons un exemple simple avec des \u00e9l\u00e9ments imbriqu\u00e9s ayant des gestionnaires d&rsquo;\u00e9v\u00e8nements :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>&lt;div id=\"parent\"&gt;\n  &lt;button id=\"child\"&gt;Click Me&lt;\/button&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\ndocument.getElementById('parent').addEventListener('click', function() {\n  console.log('Parent clicked');\n});\n\ndocument.getElementById('child').addEventListener('click', function() {\n  console.log('Child clicked');\n});\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, lorsque le bouton est cliqu\u00e9, les messages \u00ab\u00a0Child clicked\u00a0\u00bb et \u00ab\u00a0Parent clicked\u00a0\u00bb s&rsquo;affichent dans la console. Cela est d\u00fb au m\u00e9canisme de propagation, o\u00f9 l&rsquo;\u00e9v\u00e8nement se propage du bouton (cible) jusqu&rsquo;\u00e0 l&rsquo;\u00e9l\u00e9ment parent. Le <a href=\"https:\/\/wikiform.fr\/codespace\/gerer-propagation-des-evenements-en-javascript\" target=\"_blank\" rel=\"noopener\">m\u00e9canisme de propagation des \u00e9v\u00e8nements<\/a> est une fonctionnalit\u00e9 puissante qui peut \u00eatre exploit\u00e9e de diff\u00e9rentes mani\u00e8res dans JavaScript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pr\u00e9venir la Propagation en JavaScript<\/h3>\n\n\n\n<p>Parfois, il peut \u00eatre n\u00e9cessaire d&rsquo;arr\u00eater la propagation pour pr\u00e9venir certains comportements ind\u00e9sirables. Utilisez les m\u00e9thodes <code>stopPropagation()<\/code> ou <code>stopImmediatePropagation()<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>&lt;div id=\"parent\"&gt;\n  &lt;button id=\"child\"&gt;Click Me&lt;\/button&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\ndocument.getElementById('parent').addEventListener('click', function() {\n  console.log('Parent clicked');\n});\n\ndocument.getElementById('child').addEventListener('click', function(event) {\n  console.log('Child clicked');\n  event.stopPropagation();  \/\/ Emp\u00eache la propagation vers l'\u00e9l\u00e9ment parent\n});\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<p>Avec l&rsquo;utilisation de <code>event.stopPropagation()<\/code>, seul le message \u00ab\u00a0Child clicked\u00a0\u00bb s&rsquo;affichera dans la console lors du clic sur le bouton, car la propagation vers le parent est arr\u00eat\u00e9e. Pour mieux comprendre comment g\u00e9rer la propagation et bien d&rsquo;autres fonctionnalit\u00e9s en JavaScript, explorez notre guide <a href=\"https:\/\/wikiform.fr\/codespace\/utiliser-ecouteurs-evenements-en-javascript-onclick\" target=\"_blank\" rel=\"noopener\">Utiliser les \u00c9couteurs d&rsquo;\u00c9v\u00e8nements en JavaScript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion de la Capture des \u00c9v\u00e8nements<\/h3>\n\n\n\n<p>Pour g\u00e9rer les \u00e9v\u00e8nements lors de la phase de capture, il suffit de sp\u00e9cifier le troisi\u00e8me argument de <code>addEventListener<\/code> en tant que <code>true<\/code> :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>&lt;div id=\"parent\"&gt;\n  &lt;button id=\"child\"&gt;Click Me&lt;\/button&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\ndocument.getElementById('parent').addEventListener('click', function() {\n  console.log('Parent clicked');\n}, true);  \/\/ \u00c9coute de l'\u00e9v\u00e8nement pendant la phase de capture\n\ndocument.getElementById('child').addEventListener('click', function(event) {\n  console.log('Child clicked');\n});\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<p>En d\u00e9finissant ce troisi\u00e8me argument \u00e0 <code>true<\/code>, le gestionnaire d&rsquo;\u00e9v\u00e8nements du parent se d\u00e9clenchera pendant la phase de capture, avant celui de l&rsquo;enfant. En savoir plus sur les diff\u00e9rentes phases de la propagation en consultant notre guide d\u00e9taill\u00e9 sur <a href=\"https:\/\/wikiform.fr\/codespace\/objet-window-dans-le-bom-en-javascript-utilisation\" target=\"_blank\" rel=\"noopener\">l&rsquo;Objet Window dans le BOM en JavaScript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation Pratique : \u00c9viter les Doublons de Clics<\/h3>\n\n\n\n<p>Supposons que vous ayez un formulaire avec un bouton de soumission, et vous voulez \u00e9viter des soumissions multiples accidentelles. Voici comment vous pouvez y parvenir :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>&lt;form id=\"myForm\"&gt;\n  &lt;input type=\"text\" name=\"textInput\" \/&gt;\n  &lt;button type=\"submit\"&gt;Submit&lt;\/button&gt;\n&lt;\/form&gt;\n\n&lt;script&gt;\ndocument.getElementById('myForm').addEventListener('submit', function(event) {\n  event.preventDefault();  \/\/ Pr\u00e9venir la soumission par d\u00e9faut\n  console.log('Form submitted');\n  \/\/ D\u00e9sactiver le bouton pour \u00e9viter des clics multiples\n  event.target.querySelector('button&#91;type=\"submit\"]').disabled = true;\n});\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<p>Dans ce code, le bouton de soumission est d\u00e9sactiv\u00e9 d\u00e8s que le formulaire est soumis, \u00e9vitant ainsi les soumissions multiples accidentelles. Pour d&rsquo;autres astuces et consid\u00e9rations pratiques en JavaScript, consultez notre tutoriel sur <a href=\"https:\/\/wikiform.fr\/codespace\/placer-code-javascript-guide-pratique\" target=\"_blank\" rel=\"noopener\">Placer du Code JavaScript &#8211; Guide Pratique<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion Globale des \u00c9v\u00e8nements avec D\u00e9l\u00e9gation<\/h3>\n\n\n\n<p>La d\u00e9l\u00e9gation d&rsquo;\u00e9v\u00e8nements est une technique puissante pour am\u00e9liorer la performance, surtout lorsque vous avez beaucoup d&rsquo;\u00e9l\u00e9ments dynamiques. Plut\u00f4t que d&rsquo;attacher des \u00e9v\u00e8nements \u00e0 chaque \u00e9l\u00e9ment individuellement, vous les attachez \u00e0 un parent commun. Exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-js\"><code>&lt;ul id=\"itemList\"&gt;\n  &lt;li&gt;Item 1&lt;\/li&gt;\n  &lt;li&gt;Item 2&lt;\/li&gt;\n  &lt;li&gt;Item 3&lt;\/li&gt;\n&lt;\/ul&gt;\n\n&lt;script&gt;\ndocument.getElementById('itemList').addEventListener('click', function(event) {\n  if (event.target.tagName === 'LI') {\n    console.log('Item clicked:', event.target.textContent);\n  }\n});\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n\n<p>Ici, en attachant un gestionnaire d&rsquo;\u00e9v\u00e8nements au <code>ul<\/code>, tous les <code>li<\/code> en h\u00e9ritent. Cela est particuli\u00e8rement utile pour les listes dynamiques. Pour en savoir plus sur ce concept, explorez notre section sur les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-evenement-en-javascript-definition\" target=\"_blank\" rel=\"noopener\">\u00e9v\u00e8nements en JavaScript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion sur la Propagation \u00c9v\u00e8nements JavaScript<\/h3>\n\n\n\n<p>La <strong>gestion de la propagation des \u00e9v\u00e8nements en JavaScript<\/strong> est indispensable pour contr\u00f4ler le flux des interactions utilisateur dans le DOM. Comprendre les phases de propagation et savoir comment les contr\u00f4ler via des m\u00e9thodes comme <code>stopPropagation<\/code>, ou <code>addEventListener<\/code> avec capture, permet de construire des applications web robustes et performantes. Continuez \u00e0 explorer ces concepts avec des exemples pratiques et adaptez-les \u00e0 vos projets pour une interactivit\u00e9 optimis\u00e9e.<\/p>\n\n\n\n<div align=\"center\">\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/javascript-les-fondamentaux\/142\" target=\"_blank\" rel=\"noopener\">\n        <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=\"\">\n    <\/a>\n<\/div>\n\n\n\n<p>Pour plus d&rsquo;informations sur le fonctionnement de JavaScript au-del\u00e0 des \u00e9v\u00e8nements, consultez notre guide sur les <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript\" target=\"_blank\" rel=\"noopener\">Variables en JavaScript<\/a> et apprenez comment <a href=\"https:\/\/wikiform.fr\/codespace\/declarer-variables-en-javascript-let-const-var\" target=\"_blank\" rel=\"noopener\">D\u00e9clarer des Variables avec <code>let<\/code>, <code>const<\/code> et <code>var<\/code><\/a>.<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Propager les \u00c9v\u00e8nements en JavaScript est crucial pour d\u00e9velopper des interfaces web interactives et performantes. Ma\u00eetriser les concepts de propagation des \u00e9v\u00e8nements et savoir les&#8230;<\/p>\n","protected":false},"author":3,"featured_media":2886,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[18],"class_list":["post-5710","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\/5710","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=5710"}],"version-history":[{"count":2,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5710\/revisions"}],"predecessor-version":[{"id":6120,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5710\/revisions\/6120"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2886"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}