{"id":213,"date":"2008-08-25T07:00:06","date_gmt":"2008-08-25T05:00:06","guid":{"rendered":"http:\/\/nyams.planbweb.com\/blog\/?p=213"},"modified":"2008-08-25T07:00:06","modified_gmt":"2008-08-25T05:00:06","slug":"utilisze-l-event-delegation-comme-un-chef","status":"publish","type":"post","link":"https:\/\/nyamsprod.com\/blog\/utilisze-l-event-delegation-comme-un-chef\/","title":{"rendered":"Utilisez L’Event Delegation comme une chef"},"content":{"rendered":"
\n

Attention:<\/strong> Les informations de ce billet sont susceptibles d'être obsolètes car vieux de plus 2 ans.<\/p>\n

Warning: <\/strong> The information you are reading may be obsolete, this post was published more than 2 years ago.<\/p>\n<\/div>

Qui ne sait pas retrouver un jour avec une liste de liens auxquels il fallait ajouter un \u00e9v\u00e8nement pour ex\u00e9cuter tel ou tel script lorsqu’on clique dessus. g\u00e9n\u00e9ralement on se retrouve alors avec une soupe HTML qu’il faudra bien maintenir sur le site et ce n’est pas la meilleur fa\u00e7on de coder en HTML de toute fa\u00e7on. Il existe une m\u00e9thode simple et facile de r\u00e9duire le nombre d’\u00e9v\u00e8nements et surtout de centraliser leur gestion, c’est la d\u00e9l\u00e9gation d’Ev\u00e8nement ou en bon anglais l’Event Delegation, k\u00e9sako ? C’est le fait d’utiliser un \u00e9l\u00e9ment parent commun \u00e0 un ensemble d’\u00e9l\u00e9ments pour monitorer les \u00e9v\u00e8nements qui leur sont associ\u00e9s et activer en fonction des conditions l’une ou l’autre fonction. Si vous comprenez pas mon charabia c’est normal, un simple exemple vaut mieux que mille discours \ud83d\ude09 . Partons du code suivant :<\/p>\n

\n<ul id="main_menu">\n<li><strong onclick="doThis(this);">lien 1<\/strong><\/li>\n<li><a href="index.html" onclick="doThat(this); return false" title="j'aime avoir des trucs \u00e0 dire">lien 2<\/a><\/li>\n<li><a href="index.html" onclick="doThat(this); return false">lien 3<\/a><\/li>\n<li><a href="index.html" onclick="doThat(this); return false" title="moi aussi, j'aime avoir des trucs \u00e0 dire">lien 4<\/a><\/li>\n<li><a href="index.html" onclick="doThat(this); return false">lien 5<\/a><\/li>\n<li><a href="index.html" onclick="doThat(this); return false">lien 6<\/a><\/li>\n<\/ul>\n<\/pre>\n
En utilisant l’Event Delegation tel que me l’a sugg\u00e9r\u00e9 cette article<\/a>, nous allons progressivement simplifi\u00e9 notre code et vous ne pourrez plus vous passez de cette technique. Suivez le guide :<\/p>\n
1) On retire tous les \u00e9v\u00e8nements que l’on ne veut plus voir et on en garde 1 mais pas n’importe o\u00f9 :<\/p>\n
\n<ul id="main_menu" onclick="JustdoIt(event);">\n<li><strong>lien 1<\/strong><\/li>\n<li><a href="index.html" title="j'aime l'event delegation">lien 2<\/a><\/li>\n<li><a href="index.html">lien 3<\/a><\/li>\n<li><a href="index.html" title="moi aussi j'aime l'event delegation">lien 4<\/a><\/li>\n<li><a href="index.html">lien 5<\/a><\/li>\n<li><a href="index.html">lien 6<\/a><\/li>\n<\/ul>\n<\/pre>\n
Et l\u00e0 on utilise la magie du javascript et on obtient :<\/p>\n
\nfunction justDoIt(event) {\n    var el = getEventTarget(event);\n    if (\/^a$\/i.test(el.tagName) &amp;&amp; a.title != '') {\n        doThat(el);\n        return false;\n    } else if (\/^strong$\/i.test(el.tagName)) {\n        doThis(el);\n        return false;\n    }\n}\n\nfunction doThis(el) {\n    alert(el.innerHTML);\n}\n\nfunction doThat(el) {\n    alert(el.title);\n}<\/pre>\n
Explications :<\/strong><\/p>\n
Tout d’abord, l’\u00e9lement principal c’est la fonction qui va nous permettre de d\u00e9terminer sur quel \u00e9l\u00e9ment on vient de cliquer, c’est ce que je fais avec la fonction suivante :<\/p>\n
\nfunction getEventTarget(e) {\n    var o = e || window.event;\n    var el = o.target || o.srcElement;\n    if (el.nodeType===3) { \/\/rajouter pour corriger un ancien bug de Safari\n        el = el.parentNode;\n    }\n    return el;\n}\n<\/pre>\n
Ensuite on regarde si on clique bien sur l’\u00e9l\u00e9ment qui nous int\u00e9resse, c’est-\u00e0-dire qui remplit vos conditions. Pour cela j’utilise les expressions r\u00e9guli\u00e8res et les propri\u00e9t\u00e9 de l’\u00e9l\u00e9ment s\u00e9lectionn\u00e9 pour d\u00e9terminer si cet \u00e9l\u00e9ment m’int\u00e9resse. En fonction de l’int\u00e9r\u00eat que j’ai pour l’\u00e9l\u00e9ment, le script \u00e9x\u00e9cute ou pas notre fonction.<\/p>\n
Derni\u00e8re touche, en utilisant une fonction de gestion des Ev\u00e8nements Javascript<\/a> on peut m\u00eame retirer le dernier onclick<\/code> qui subsite dans la page pour r\u00e9duire au maximum la pr\u00e9sence du javascript dans notre page. On aura donc dans un tag script<\/code> suivant la liste ou en fin de page l’insertion javascript suivante :<\/p>\n
 \n<script type="text\/javascript">Events.addEvent(document.getElementById('main_menu'),'click',justDoIt);<script>\n<\/pre>\n
Soit dit en passant c’est cette technique que j’utilise pour l’affichage de mon sous-menu lorsque l’on clique sur certaines rubriques du menu principal du th\u00e8me courant de mon blog ;).<\/p>\n","protected":false},"excerpt":{"rendered":"
Explication simple est rapide d’une technique non-intrusive d’utilisation du javascript qui se base sur l’Event D\u00e9l\u00e9gation<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[179,180,292],"class_list":["post-213","post","type-post","status-publish","format-standard","hentry","category-web","tag-event-delegation","tag-event-handler","tag-javascript"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/comments?post=213"}],"version-history":[{"count":0,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/213\/revisions"}],"wp:attachment":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/media?parent=213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/categories?post=213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/tags?post=213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}