{"id":5702,"date":"2024-08-29T03:08:10","date_gmt":"2024-08-29T03:08:10","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-evenement-en-javascript-definition\/"},"modified":"2024-08-29T03:08:13","modified_gmt":"2024-08-29T03:08:13","slug":"qu-est-ce-qu-un-evenement-en-javascript-definition","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-evenement-en-javascript-definition\/","title":{"rendered":"14.1 Qu&rsquo;est-ce qu&rsquo;un \u00c9v\u00e8nement en JavaScript ? D\u00e9finition"},"content":{"rendered":"\n<p><strong>\u00c9v\u00e8nement JavaScript<\/strong> sont fondamentaux pour rendre vos pages web interactives et dynamiques. Comprendre ce que sont les <strong>\u00e9v\u00e9nements en JavaScript<\/strong> et comment les g\u00e9rer efficacement peut transformer votre approche du d\u00e9veloppement client. Plongeons dans ce concept crucial avec une explication d\u00e9taill\u00e9e et des exemples pratiques afin de ma\u00eetriser cet aspect essentiel du langage JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>\u00c9v\u00e9nements 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\/658892032?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>Un <strong>\u00e9v\u00e8nement JavaScript<\/strong> est une action ou une occurrence d\u00e9tect\u00e9e par le navigateur, par exemple un clic de souris, une pression de touche, ou lorsqu&rsquo;une page se charge. Lorsqu\u2019un \u00e9v\u00e9nement se produit, il peut d\u00e9clencher des fonctions sp\u00e9cifiques appel\u00e9es gestionnaires d&rsquo;\u00e9v\u00e9nements ou \u00e9couteurs d&rsquo;\u00e9v\u00e9nements, qui permettent de r\u00e9agir \u00e0 ce changement d&rsquo;\u00e9tat.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comprendre les \u00c9v\u00e9nements en JavaScript<\/h3>\n\n\n\n<p>Les \u00e9v\u00e9nements sont un aspect essentiel du mod\u00e8le de programmation JavaScript, souvent associ\u00e9s aux interactions utilisateur. Ils permettent de cr\u00e9er des interactions dynamiques et r\u00e9actives sur les pages web. Les types les plus courants d&rsquo;\u00e9v\u00e9nements incluent les \u00e9v\u00e9nements de souris (clic, double-clic, survol), les \u00e9v\u00e9nements de clavier (press, up, down), et les \u00e9v\u00e9nements du DOM (chargement de la page, changement de contenu). Voici un exemple de gestionnaire d&rsquo;\u00e9v\u00e9nement 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\">Types d&rsquo;\u00c9v\u00e9nements en JavaScript<\/h3>\n\n\n\n<p>Il existe de nombreux types d&rsquo;\u00e9v\u00e9nements en JavaScript. Voici une liste non exhaustive des cat\u00e9gories d&rsquo;\u00e9v\u00e9nements courants et des exemples associ\u00e9s :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n    <li><strong>\u00c9v\u00e9nements de souris :<\/strong> click, dblclick, mouseover, mouseout<\/li>\n    <li><strong>\u00c9v\u00e9nements de clavier :<\/strong> keydown, keyup, keypress<\/li>\n    <li><strong>\u00c9v\u00e9nements du DOM :<\/strong> load, DOMContentLoaded, unload, scroll<\/li>\n    <li><strong>\u00c9v\u00e9nements de formulaire :<\/strong> submit, change, focus, blur<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Ajouter des Gestionnaires d&rsquo;\u00c9v\u00e9nements<\/h3>\n\n\n\n<p>Il existe plusieurs fa\u00e7ons d&rsquo;ajouter des gestionnaires d&rsquo;\u00e9v\u00e9nements en JavaScript :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n    <li><strong>Attributs HTML :<\/strong> Dissocier une fonction directement dans le balisage HTML. D\u00e9couvrez comment <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-un-evenement-en-javascript-definition\" target=\"_blank\" rel=\"noopener\">placer du code JavaScript<\/a> dans un projet.<\/li>\n    <li><strong>M\u00e9thode addEventListener :<\/strong> Ajouter dynamiquement des \u00e9couteurs d&rsquo;\u00e9v\u00e9nements au code JavaScript.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>\/\/ HTML\n&lt;button id=\"myButton\" onclick=\"myFunction()\"&gt;Cliquez-moi&lt;\/button&gt;\n\n\/\/ JavaScript\nfunction myFunction() {\n    alert('Bouton cliqu\u00e9!');\n}\n\n\/\/ Utilisation de addEventListener\ndocument.getElementById('myButton').addEventListener('click', function() {\n    alert('Bouton cliqu\u00e9 avec addEventListener!');\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Gestion des \u00c9v\u00e9nements<\/h3>\n\n\n\n<p>Pour aller plus loin dans la gestion des \u00e9v\u00e9nements, JavaScript fourni de nombreux outils et techniques pour contr\u00f4ler le comportement des \u00e9v\u00e9nements et r\u00e9agir de mani\u00e8re appropri\u00e9e :<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n    <li><strong>Arr\u00eater la propagation :<\/strong> \u00c9viter que l&rsquo;\u00e9v\u00e9nement ne se propage \u00e0 d&rsquo;autres \u00e9l\u00e9ments.<\/li>\n    <li><strong>Emp\u00eacher le comportement par d\u00e9faut :<\/strong> Emp\u00eacher l&rsquo;action par d\u00e9faut de se produire.<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.getElementById('myButton').addEventListener('click', function(event) {\n    event.stopPropagation(); \/\/ Arr\u00eater la propagation\n    event.preventDefault();  \/\/ Emp\u00eacher le comportement par d\u00e9faut\n    alert('Bouton cliqu\u00e9 avec propagation arr\u00eat\u00e9e et comportement par d\u00e9faut emp\u00each\u00e9!');\n});\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisation des \u00c9v\u00e9nements pour Am\u00e9liorer l&rsquo;Interface Utilisateur<\/h3>\n\n\n\n<p>Les \u00e9v\u00e9nements en JavaScript peuvent consid\u00e9rablement am\u00e9liorer l&rsquo;interaction utilisateur en ajoutant des fonctionnalit\u00e9s dynamiques et interactives. Par exemple, vous pouvez cr\u00e9er des menus d\u00e9roulants, des carrousels d&rsquo;images, des validations de formulaire en temps r\u00e9el, et bien plus encore :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-javascript\"><code>document.getElementById('menuButton').addEventListener('click', function() {\n    var menu = document.getElementById('dropdownMenu');\n    if (menu.style.display === 'none') {\n        menu.style.display = 'block';\n    } else {\n        menu.style.display = 'none';\n    }\n});\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion sur les \u00c9v\u00e9nements en JavaScript<\/h2>\n\n\n\n<p>Les <strong>\u00e9v\u00e9nements en JavaScript<\/strong> sont un outil puissant pour ajouter de l&rsquo;interactivit\u00e9 et du dynamisme \u00e0 vos pages web. En comprenant comment ajouter des gestionnaires d&rsquo;\u00e9v\u00e9nements et g\u00e9rer les comportements \u00e9v\u00e9nementiels, vous pouvez cr\u00e9er des applications web plus engageantes et r\u00e9actives. Continuez \u00e0 explorer les diff\u00e9rents types d&rsquo;\u00e9v\u00e9nements et leurs utilisations pour ma\u00eetriser pleinement la gestion des interactions utilisateur. Pour des explications plus d\u00e9taill\u00e9es sur ces concepts, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/moderation-des-contenus-en-javascript\" target=\"_blank\" rel=\"noopener\">qu&rsquo;est-ce que mod\u00e9ration des contenus en JavaScript<\/a>, et n&rsquo;oubliez pas d&rsquo;explorer notre <a href=\"https:\/\/wikiform.fr\/codespace\/concatenation-en-javascript-guide-pratique\" target=\"_blank\" rel=\"noopener\">guide complet sur la concat\u00e9nation en JavaScript<\/a>.<\/p>\n\n\n\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\n\n\n<p>N&rsquo;oubliez pas que l&rsquo;utilisation des <strong>\u00e9v\u00e9nements en JavaScript<\/strong> ne se limite pas aux interactions basiques comme les clics ou les frappes de touches. Ils sont \u00e9galement indispensables pour la gestion des animations, la validation de formulaires, et la manipulation avanc\u00e9e du DOM. Pour aller plus loin, explorez notre <a href=\"https:\/\/wikiform.fr\/codespace\/qu-est-ce-qu-une-variable-en-javascript\" target=\"_blank\" rel=\"noopener\">guide sur les variables en JavaScript<\/a> et d\u00e9couvrez comment ils interagissent avec les \u00e9v\u00e9nements pour cr\u00e9er des interfaces plus fluides et intuitives. De plus, si vous d\u00e9butez dans le d\u00e9veloppement JavaScript, notre <a href=\"https:\/\/wikiform.fr\/codespace\/declarer-variables-en-javascript-let-const-var\" target=\"_blank\" rel=\"noopener\">tutoriel sur la d\u00e9claration de variables<\/a> peut \u00eatre un excellent point de d\u00e9part.<\/p>\n\n\n\n<p>Enfin, pour ceux qui souhaitent approfondir leurs connaissances sur JavaScript, nous recommandons fortement d&rsquo;explorer notre article sur <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-vs-code-pour-javascript\" target=\"_blank\" rel=\"noopener\">le fonctionnement de Visual Studio Code pour JavaScript<\/a>. Cela vous permettra non seulement de comprendre comment manipuler les \u00e9v\u00e9nements de mani\u00e8re efficace mais aussi de d\u00e9boguer et d&rsquo;analyser votre code pour des projets plus complexes.<\/p>\n\n\n\n<p>Liens externes recommand\u00e9s:<\/p>\n<ul>\n  <li><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/JavaScript\/Guide\/Introduction\" target=\"_blank\" rel=\"noopener nofollow\">Introduction \u00e0 JavaScript &#8211; MDN Web Docs<\/a><\/li>\n  <li><a href=\"https:\/\/javascript.info\/events\" target=\"_blank\" rel=\"noopener nofollow\">JavaScript Events &#8211; JavaScript.info<\/a><\/li>\n  <li><a href=\"https:\/\/www.w3schools.com\/js\/js_events.asp\" target=\"_blank\" rel=\"noopener nofollow\">JavaScript Events &#8211; W3Schools<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u00c9v\u00e8nement JavaScript sont fondamentaux pour rendre vos pages web interactives et dynamiques. Comprendre ce que sont les \u00e9v\u00e9nements en JavaScript et comment les g\u00e9rer efficacement&#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-5702","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\/5702","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=5702"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5702\/revisions"}],"predecessor-version":[{"id":5703,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5702\/revisions\/5703"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}