diff options
author | MDN <actions@users.noreply.github.com> | 2021-04-17 00:11:36 +0000 |
---|---|---|
committer | MDN <actions@users.noreply.github.com> | 2021-04-17 00:11:36 +0000 |
commit | 0ccebc7eb352eda4d26d0b876fea36f24f482eec (patch) | |
tree | f5c0a32bc5149d8bd5aa7942577758ce7c8ed485 /files/fr/web/guide | |
parent | 40cd01daeb2f6f7fff40ff2986208513afc8678e (diff) | |
download | translated-content-0ccebc7eb352eda4d26d0b876fea36f24f482eec.tar.gz translated-content-0ccebc7eb352eda4d26d0b876fea36f24f482eec.tar.bz2 translated-content-0ccebc7eb352eda4d26d0b876fea36f24f482eec.zip |
[CRON] sync translated content
Diffstat (limited to 'files/fr/web/guide')
-rw-r--r-- | files/fr/web/guide/events/creating_and_triggering_events/index.html | 97 |
1 files changed, 0 insertions, 97 deletions
diff --git a/files/fr/web/guide/events/creating_and_triggering_events/index.html b/files/fr/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index a15f241ff1..0000000000 --- a/files/fr/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Création et déclenchement d'événements -slug: Web/Guide/Events/Creating_and_triggering_events -tags: - - API - - Avancé - - DOM - - Guide - - JavaScript - - évènements -translation_of: Web/Guide/Events/Creating_and_triggering_events -original_slug: Web/Guide/DOM/Events/Creating_and_triggering_events ---- -<p>Cet article montre comment créer et distribuer des événements DOM. De tels événements sont généralement appelés <strong>événements synthétiques</strong> afin de les distinguer des événements levés par le navigateur lui-même.</p> - -<h2 id="Création_dévénements_personnalisés">Création d'événements personnalisés</h2> - -<p>Les événements peuvent être créés avec le constructeur <a href="https://developer.mozilla.org/fr/docs/Web/API/Event" title="/fr/docs/Web/API/Event"> <code>Event</code> </a>de cette manière :</p> - -<pre class="brush: js">var event = new Event('build'); - -//Ecouter l'événement. -elem.addEventListener('build', function (e) { ... }, false); - -//distribuer l'événement. -elem.dispatchEvent(event);</pre> - -<p>Ce constructeur est pris en charge par la plupart des navigateurs modernes (Internet Explorer étant l'exception). Pour une approche plus verbeuse (qui fonctionne avec Internet Explorer), voir <a href="#Ancienne_approche" title="#Ancienne_approche"> l'ancienne approche </a> ci-dessous.</p> - -<h3 id="Ajout_de_données_personnalisée_-_CustomEvent">Ajout de données personnalisée - CustomEvent ()</h3> - -<p>Pour ajouter d'autres données à l'objet événement, il existe l'interface CustomEvent. Dans cette interface, la propriété <code><u> <strong>detail</strong></u></code> peut être utilisée pour transmettre des données personnalisées. Par exemple, l'événement peut être créé de la manière suivante :</p> - -<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre> - -<p>Cela permet à la fonction qui capture l'événement (la fonction de rappel) d'accéder aux données supplémentaires :</p> - -<pre class="brush: js">function eventHandler(e) { - log('The time is: ' + e.detail); -} -</pre> - -<h3 id="Lancienne_approche"><a id="Ancienne_approche" name="Ancienne_approche"></a>L'ancienne approche</h3> - -<p>L'ancienne manière de créer des événements utilise des API inspirées par Java. Le code suivant en montre un exemple :</p> - -<pre class="brush: js">// Crée l'événement -var event = document.createEvent('Event'); - -// Nomme l'événement 'build'. -event.initEvent('build', true, true); - -// Écoute l'événement. -elem.addEventListener('build', function (e) { - // e.target correspond à elem -}, false); - -// target peut être n'importe quel Element ou autre EventTarget. -elem.dispatchEvent(event); - -</pre> - -<h2 id="Le_déclenchement_dévénements_intégrés">Le déclenchement d'événements intégrés</h2> - -<p>Cet exemple démontre la simulation d'un clic (programmation générant un événement de clic) sur une case à cocher en utilisant des méthodes DOM. <a href="http://developer.mozilla.org/samples/domref/dispatchEvent.html" title="http://developer.mozilla.org/samples/domref/dispatchEvent.html"> Voir l'exemple en action. </a></p> - -<pre class="brush: js">function simulateClick() { - var event = new MouseEvent('click', { - 'view': window, - 'bubbles': true, - 'cancelable': true - }); - var cb = document.getElementById('checkbox'); - var canceled = !cb.dispatchEvent(event); - if (canceled) { - //Un gestionnaire appelé preventDefault. - alert("canceled"); - } else { - //Aucun gestionnaires appelé preventDefault. - alert("not canceled"); - } -}</pre> - -<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("api.Event.Event")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("document.createEvent()")}}</li> - <li>{{domxref("Event.initEvent()")}}</li> - <li>{{domxref("EventTarget.dispatchEvent()")}}</li> - <li>{{domxref("EventTarget.addEventListener()")}}</li> -</ul> |