diff options
Diffstat (limited to 'files/fr/web/api/event/currenttarget/index.md')
| -rw-r--r-- | files/fr/web/api/event/currenttarget/index.md | 91 |
1 files changed, 32 insertions, 59 deletions
diff --git a/files/fr/web/api/event/currenttarget/index.md b/files/fr/web/api/event/currenttarget/index.md index d70ad8d00f..d1abd29fdc 100644 --- a/files/fr/web/api/event/currenttarget/index.md +++ b/files/fr/web/api/event/currenttarget/index.md @@ -9,23 +9,24 @@ tags: - Propriété translation_of: Web/API/Event/currentTarget --- -<div>{{APIRef("DOM")}}</div> +{{APIRef("DOM")}} -<p>La propriété <code><strong>currentTarget</strong></code>, accessible en lecture seule et rattachée à l'interface {{domxref("Event")}}, identifie la cible courante pour l'évènement lorsque celui-ci traverse le DOM. Elle fait toujours référence à l'élément sur lequel le gestionnaire d'évènement a été attaché tandis que {{domxref("Event.target")}} identifie l'élément à partir duquel l'évènement s'est produit (<code>event.target</code> peut donc être un descendant de <code>event.currentTarget</code>).</p> +La propriété **`currentTarget`**, accessible en lecture seule et rattachée à l'interface {{domxref("Event")}}, identifie la cible courante pour l'évènement lorsque celui-ci traverse le DOM. Elle fait toujours référence à l'élément sur lequel le gestionnaire d'évènement a été attaché tandis que {{domxref("Event.target")}} identifie l'élément à partir duquel l'évènement s'est produit (`event.target` peut donc être un descendant de `event.currentTarget`). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">var <em>currentEventTarget</em> = <em>event</em>.currentTarget;</pre> + var currentEventTarget = event.currentTarget; -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>{{domxref("EventTarget")}}</p> +{{domxref("EventTarget")}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<p><code>Event.currentTarget</code> peut s'avérer utile lorsqu'on attache le même gestionnaire d'évènement à plusieurs éléments.</p> +`Event.currentTarget` peut s'avérer utile lorsqu'on attache le même gestionnaire d'évènement à plusieurs éléments. -<pre class="brush: js">// Cette fonction masque la cible courante de l'évènement +```js +// Cette fonction masque la cible courante de l'évènement // et l'affiche dans la console. function hide(e){ e.currentTarget.style.visibility = 'hidden'; @@ -36,57 +37,29 @@ function hide(e){ var ps = document.getElementsByTagName('p'); -for(var i = 0; i < ps.length; i++){ - // On affiche l'élément <p> qui a été cliqué dans la console +for(var i = 0; i < ps.length; i++){ + // On affiche l'élément <p> qui a été cliqué dans la console ps[i].addEventListener('click', hide, false); } -// On affiche l'élément <body> dans la console +// On affiche l'élément <body> dans la console document.body.addEventListener('click', hide, false); +``` -</pre> - -<div class="note"> -<p><strong>Note :</strong> La valeur de <code>event.currentTarget</code> est <strong>uniquement</strong> disponible lorsque l'évènement est géré. Ainsi, on ne pourra pas observer la valeur de <code>currentTarget</code> <em>a posteriori</em> (ex. si on a stocké la valeur d'<code>event</code> dans une variable lors de la gestion de l'évènement puis qu'on utilise celle-ci plus tard, <code>event.currentTarget</code> aura la valeur <code>null</code>).</p> -</div> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Spécification</th> - <th>État</th> - <th>Commentaires</th> - </tr> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-event-currenttarget", "Event.currentTarget")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-event-currenttarget", "Event.currentTarget")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("DOM3 Events", "#dfn-current-event-target", "current event target")}}</td> - <td>{{Spec2("DOM3 Events")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}</td> - <td>{{Spec2("DOM2 Events")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.Event.currentTarget")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li><a href="/fr/docs/Web/API/Event/Comparaison_des_cibles_d_évènements">Comparaison des différentes cibles pour les évènements</a></li> -</ul> +> **Note :** La valeur de `event.currentTarget` est **uniquement** disponible lorsque l'évènement est géré. Ainsi, on ne pourra pas observer la valeur de `currentTarget` _a posteriori_ (ex. si on a stocké la valeur d'`event` dans une variable lors de la gestion de l'évènement puis qu'on utilise celle-ci plus tard, `event.currentTarget` aura la valeur `null`). + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------ | +| {{SpecName("DOM WHATWG", "#dom-event-currenttarget", "Event.currentTarget")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM4", "#dom-event-currenttarget", "Event.currentTarget")}} | {{Spec2("DOM4")}} | | +| {{SpecName("DOM3 Events", "#dfn-current-event-target", "current event target")}} | {{Spec2("DOM3 Events")}} | | +| {{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}} | {{Spec2("DOM2 Events")}} | Initial definition | + +## Compatibilité des navigateurs + +{{Compat("api.Event.currentTarget")}} + +## Voir aussi + +- [Comparaison des différentes cibles pour les évènements](/fr/docs/Web/API/Event/Comparaison_des_cibles_d_évènements) |