{"id":1238,"date":"2024-05-20T17:38:25","date_gmt":"2024-05-20T16:38:25","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=1238"},"modified":"2024-11-05T14:36:41","modified_gmt":"2024-11-05T13:36:41","slug":"declencher-evenement-javascript-vanilla","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2024\/05\/20\/declencher-evenement-javascript-vanilla\/","title":{"rendered":"Comment d\u00e9clencher n’importe quel \u00e9v\u00e9nement en JavaScript vanilla"},"content":{"rendered":"\n

Apr\u00e8s avoir r\u00e9ussi \u00e0 automatiser les clicks sur les fortunes de Cookie Clicker (voir ici<\/a>), par curiosit\u00e9 je me suis int\u00e9ress\u00e9 \u00e0 la premi\u00e8re version de ce jeu (voir ici<\/a>).<\/p>\n\n\n\n

Sur cette version, la premi\u00e8re chose que j\u2019ai cherch\u00e9 \u00e0 automatiser est bien \u00e9videmment le click sur le cookie.<\/p>\n\n\n\n

Apr\u00e8s un rapide coup d\u2019oeil au code de la page, j\u2019ai trouv\u00e9 l\u2019id de notre cookie (dans notre cas \u201ccookie\u201d), et j\u2019ai mis en place un classique setInterval<\/code> pour d\u00e9clencher un clic, avec notre grande amie la m\u00e9thode click().<\/p>\n\n\n

\nlet legacyCookieClicker = setInterval(() => {\n   document.querySelector('#cookie').click();\n}, 250);\n<\/pre><\/div>\n\n\n
Mais cela n\u2019avais par l\u2019air d\u2019avoir d\u2019effet.<\/p>\n\n\n\n\n\n\n\n
En revenant au code de la page, je me suis aper\u00e7u que sur cette version la fonction de gestion de clic est attach\u00e9e \u00e0 l\u2019\u00e9v\u00e9nement mouseup<\/a><\/code>. Mais il n\u2019existe pas de m\u00e9thode mouseUp() sur les \u00e9l\u00e9ments HTML.<\/p>\n\n\n\n
Une rapide recherche m\u2019a permis de d\u00e9couvrir qu\u2019il \u00e9tait possible de d\u00e9clencher n\u2019importe quel \u00e9v\u00e9nement de mani\u00e8re programmatique : la m\u00e9thode dispatchEvent()<\/a><\/code>.<\/p>\n\n\n\n
Pour utiliser m\u00e9thode, il faut d\u2019abord cr\u00e9er notre \u00e9v\u00e9nement, avec le constructeur correspondant \u00e0 son type.<\/p>\n\n\n
\nconst myEvent = new PointerEvent('click');\n<\/pre><\/div>\n\n\n
Et ensuite, il suffit d\u2019utiliser la m\u00e9thode dispatchEvent de la cible de l\u2019\u00e9v\u00e9nement que l\u2019on veut d\u00e9clencher avec JavaScript.<\/p>\n\n\n
\nmyTarget.dispatchEvent(myEvent);\n<\/pre><\/div>\n\n\n
Dans le cas qui nous int\u00e9resse, le code complet donne :<\/p>\n\n\n
\nsetInterval(() => {\n   const evnt = new MouseEvent('mouseup');\n   \n   document.querySelector('#cookie').dispatchEvent(evnt);\n}, 250);\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"
Apr\u00e8s avoir r\u00e9ussi \u00e0 automatiser les clicks sur les fortunes de Cookie Clicker (voir ici), par curiosit\u00e9 je me suis int\u00e9ress\u00e9 \u00e0 la premi\u00e8re version de ce jeu (voir ici). Sur cette version, la premi\u00e8re chose que j\u2019ai cherch\u00e9 \u00e0 … Continuer la lecture →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[19],"tags":[65,31],"class_list":["post-1238","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-cookie-clicker","tag-javascript"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-jY","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1220,"url":"https:\/\/geekcommunicant.com\/blog\/2024\/03\/01\/automatiser-clic-fortunes-cookie-clicker\/","url_meta":{"origin":1238,"position":0},"title":"Automatiser le clic sur les fortunes de Cookie Clicker","author":"geekc","date":"01\/03\/2024","format":false,"excerpt":"Aujourd\u2019hui, apr\u00e8s avoir effectu\u00e9 une ascension sur Cookie Clicker, je me suis dit : \u201cSi je veux d\u00e9bloquer les fortunes (qui apparaissent dans le fil d\u2019actualit\u00e9s), il va falloir encore que je reste attentif devant mon \u00e9cran\u2026\u201d. C\u2019est alors que je me suis demand\u00e9 s\u2019il n\u2019y avait pas moyen d\u2019automatiser\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1121,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/02\/24\/gloubi-script-cadre-clignotant\/","url_meta":{"origin":1238,"position":1},"title":"Gloubi script – un cadre clignotant","author":"geekc","date":"24\/02\/2023","format":false,"excerpt":"Aujourd\u2019hui, nous allons nous attaquer \u00e0 un script pr\u00e9sent\u00e9 chez notre gloubi rival qui pourra vous \u00eatre tr\u00e8s utile pour mettre en avant n\u2019importe quel contenu sur, par exemple, la magnifique page d\u2019accueil de votre tout aussi sublime site\u00a0: le cadre clignotant. Comme pour d\u2019autres gloubi scripts d\u00e9j\u00e0 pr\u00e9sent\u00e9s, il\u2026","rel":"","context":"Dans "CSS"","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":976,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/02\/gloubi-tuto-un-menu-interactif-hello-kitty\/","url_meta":{"origin":1238,"position":2},"title":"Gloubi tuto – un menu interactif Hello Kitty","author":"geekc","date":"02\/12\/2022","format":false,"excerpt":"Bienvenue sur ce premier gloubi tuto (pour en savoir plus sur les gloubi tutos) qui concerne un menu interactif avec Hello Kitty. Pr\u00e9sentation et explication de l\u2019existant Pour voir la source du script actuel, RDV sur cette page du site de notre nouvel adversaire dans la guerre du gloubi. Le\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":727,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/04\/15\/retour-premiere-carte-interactive\/","url_meta":{"origin":1238,"position":3},"title":"Retour sur ma premi\u00e8re carte interactive","author":"geekc","date":"15\/04\/2019","format":false,"excerpt":"Dans mon dernier article (voir), j'ai indiqu\u00e9 que la premi\u00e8re solution de carte interactive que j'avais pr\u00e9sent\u00e9e dans une s\u00e9rie de deux articles (1 et 2) ne fonctionnait pas sous Chrome. R\u00e9cemment, en consultant le code d'une page de reserves-naturelles.org, je me suis aper\u00e7u que la carte des r\u00e9gions de\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1271,"url":"https:\/\/geekcommunicant.com\/blog\/2024\/11\/11\/marqueur-personnalise-leaflet\/","url_meta":{"origin":1238,"position":4},"title":"Un marqueur personnalis\u00e9 avec Leaflet","author":"geekc","date":"11\/11\/2024","format":false,"excerpt":"Lors de mon tutoriel sur la carte du m\u00e9tro de Paris avec Leaflet, j\u2019ai d\u00e9j\u00e0 personnalis\u00e9 les marqueurs de cette carte, mais comme dans le cadre du tutoriel c\u2019\u00e9tait assez secondaire, je n\u2019ai pas d\u00e9taill\u00e9 ce point. Aujourd\u2019hui est venu le temps de revenir sur la mani\u00e8re d\u2019utiliser nos propres\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1058,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/01\/06\/retour-compteur-caracteres\/","url_meta":{"origin":1238,"position":5},"title":"Le retour du compteur de caract\u00e8res","author":"geekc","date":"06\/01\/2023","format":false,"excerpt":"Apr\u00e8s \u00eatre revenu derni\u00e8rement sur ma s\u00e9rie de tutos d\u2019introduction aux canvas, j\u2019ai d\u00e9cid\u00e9 de m\u2019attaquer \u00e0 l\u2019un de mes anciens articles me valant le plus d\u2019affichage sur le moteur de recherche d\u2019Alphabet\u00a0: le compteur de caract\u00e8res. Comme pour mes derniers articles traitant de JavaScript, une fois de plus je\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/comments?post=1238"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1238\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=1238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=1238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=1238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}