Quelqu'un peut-il me dire la différence exacte entre currentTarget
et la target
propriété dans les événements Javascript avec exemple et quelle propriété est utilisée dans quel scénario?
javascript
Valli69
la source
la source
Réponses:
Fondamentalement, les événements bouillonnent par défaut, la différence entre les deux est donc:
target
est l'élément qui a déclenché l'événement (par exemple, l'utilisateur a cliqué sur)currentTarget
est l'élément auquel l'écouteur d'événement est attaché.Voir une explication simple sur ce billet de blog .
la source
XMLHttpRequest
target
= élément qui a déclenché l'événement.currentTarget
= élément qui a l'écouteur d'événement.la source
Exemple exécutable minimal
Si vous cliquez sur:
puis l'
1
écoute et ajoute au résultat:car dans ce cas:
2
est l'élément à l'origine de l'événement1
est l'élément qui a écouté l'événementSi vous cliquez sur:
au lieu de cela, le résultat est:
Testé sur Chrome 71.
la source
Si cela ne colle pas, essayez ceci:
actuel en
currentTarget
fait référence au présent. C'est la cible la plus récente qui a attrapé l'événement qui s'est propagé d'ailleurs.la source
Si vous cliquez sur la balise P dans le code ci-dessus, vous obtiendrez trois alertes, et si vous cliquez sur la balise div, vous obtiendrez deux alertes et une seule alerte en cliquant sur la balise de formulaire. Et maintenant, voyez le code suivant,
Ici event.target est [object HTMLParagraphElement], et event.curentTarget est [object HTMLDivElement]: Donc
Ici, nous avons cliqué sur la balise P mais nous n'avons pas d'écouteur sur P mais sur son élément parent div.
la source
event.target est le nœud à l'origine de l'événement, c'est-à-dire. où que vous placiez votre écouteur d'événements (sur un paragraphe ou une étendue), event.target fait référence au nœud (où l'utilisateur a cliqué).
event.currentTarget , au contraire, fait référence au noeud auquel l'écouteur d'événements en cours a été attaché. C'est à dire. si nous avons attaché notre écouteur d'événements sur le nœud de paragraphe, alors event.currentTarget fait référence au paragraphe tandis que event.target fait toujours référence à span. Remarque: si nous avons également un écouteur d'événements sur le corps, alors pour cet écouteur d'événements, event.currentTarget fait référence au corps (c'est-à-dire que l'événement fourni en entrée aux listeurs d'événements est mis à jour à chaque fois que l'événement propulse un nœud vers le haut).
la source