L'objet event

L'objet event est généré lors du déclenchement d'un événement et contient des informations à son sujet. Lorsqu'un événement se produit, l'objet event est transmis à la fonction de gestionnaire.

Propriétés et méthodes de l'objet event

Le tableau ci-dessous répertorie les propriétés et méthodes de l'objet event et leur description :

Nom	Description
`event.currentTarget`	L'élément DOM actuel lors de la phase de bouillonnement de l'événement. Généralement, cette propriété est équivalente au `this` de la fonction.
`event.data`	Paramètre facultatif. Objet de données transmis à la méthode de l'événement lors de l'attachement du gestionnaire exécutable.
`event.delegateTarget`	L'élément auquel le gestionnaire d'événements jQuery vient d'être attaché. Cette propriété est particulièrement utile pour les événements délégués, lorsque le gestionnaire est lié à un ancêtre de l'élément traité. Pour les gestionnaires non délégués, liés directement à l'élément, la valeur de `event.delegateTarget` correspond à la valeur de `event.currentTarget`.
`event.isDefaultPrevented`	La méthode vérifie si la méthode `event.preventDefault` a été appelée pour cet objet événement.
`event.isImmediatePropagationStopped`	La méthode vérifie si la méthode `event.stopImmediatePropagation` a été appelée pour cet objet événement.
`event.isPropagationStopped`	La méthode vérifie si la méthode `event.stopPropagation` a été appelée pour cet objet événement.
`event.isPropagationStopped`	La méthode vérifie si la méthode `event.stopPropagation` a été appelée pour cet objet événement.
`event.metaKey`	La méthode vérifie si la touche `META` était enfoncée au moment du déclenchement de l'événement. Selon la plateforme, la touche peut différer. Renvoie `true` ou `false`.
`event.namespace`	L'espace de nom spécifié au moment de l'appel de l'événement. Cette propriété s'avère utile pour les auteurs de plugins, dont les tâches dépendent de l'espace de nom utilisé.
`event.pageX`	Affiche la position de la souris par rapport au bord gauche du document.
`event.pageY`	Affiche la position de la souris par rapport au bord supérieur du document.
`event.preventDefault`	Si cette méthode est appelée, l'action par défaut pour cet événement ne sera pas exécutée. Par exemple, cliquer sur un lien ne conduira pas à une navigation vers une nouvelle URL. Pour vérifier si cette méthode a été appelée, on peut utiliser la méthode `event.isDefaultPrevented`.
`event.relatedTarget`	Renvoie l'autre élément DOM participant à l'événement, s'il existe. Pour `mouseout`, indique sur quel élément la souris est survolée, pour `mouseover`, de quel élément le curseur de la souris a été éloigné.
`event.result`	La dernière valeur renvoyée par le gestionnaire de l'événement déclenché, qui n'est pas égale à `undefined`. Cette propriété peut être utile pour obtenir les valeurs des événements personnalisés.
`event.stopImmediatePropagation`	Annule l'exécution de tous les gestionnaires d'événements restants liés à l'élément et empêche la propagation (bouillonnement) de l'événement vers le haut de l'arborescence DOM. Pour simplement empêcher l'événement de remonter aux éléments ancêtres, mais autoriser l'exécution d'autres gestionnaires d'événements, on peut utiliser la méthode `event.stopPropagation`. Utilisez la méthode `event.isImmediatePropagationStopped` pour vérifier si `event.stopImmediatePropagation` a été appelée pour cet objet événement.
`event.stopPropagation`	Empêche la propagation (bouillonnement) de l'événement vers le haut de l'arborescence DOM. Notez que les autres gestionnaires continueront de fonctionner pour cet élément. Cette méthode fonctionne pour les événements personnalisés, déclenchés via la méthode `trigger`. Pour vérifier si cette méthode a été appelée, utilisez `event.isPropagationStopped`.
`event.target`	L'élément DOM ayant initié l'événement. Il peut s'agir de l'élément enregistré pour l'événement ou de l'un de ses descendants. Il est très utile de comparer `event.target` et `this` pour déterminer la propagation (bouillonnement) de l'événement. La propriété est utile lors de la délégation d'événements, lorsque les événements remontent.
`event.timeStamp`	La différence de temps en millisecondes entre le moment de la création de l'événement par le navigateur et le 1er Janvier 1970. Cette propriété peut être utile pour déterminer les performances d'un événement en obtenant la différence des valeurs de `event.timeStamp` pour deux moments donnés dans le code. Si vous voulez simplement obtenir l'heure actuelle à l'intérieur d'un gestionnaire d'événements, utilisez la méthode `getTime`.
`event.type`	Cette propriété indique le type de l'événement.
`event.which`	Cette propriété indique quelle touche du clavier ou de la souris a été enfoncée. Pour la souris : `1` - bouton gauche, `2` - molette, `3` - bouton droit. Utilisez `event.which` au lieu de `event.button`.

Autres propriétés de l'objet event

Il existe d'autres propriétés qui sont copiées dans l'objet event :

altKey, button, buttons, cancelable, char, charCode, clientX, clientY, ctrlKey, detail, eventPhase, key, keyCode, offsetX, offsetY, originalTarget, screenX, screenY, shiftKey, toElement, view.

Pour accéder aux propriétés non listées ci-dessus, on peut utiliser l'objet event.originalEvent.

Exemple

Afficheons dans un div - quelles touches ont été enfoncées :

<input id="test" value="tapez quelque chose">
<div id="text"></div>

$('#test').on('keydown', function(event) {
	$('#text').html(event.type + ": " +  event.which);
});

Exemple

Afficheons dans un div - sur quelle balise nous cliquons :

<body>
	<div id="text"></div>
	<div>
		<p>
			<strong><span>cliquez</span></strong>
		</p>
	</div>
</body>

span, strong, p {
	display: block;
	padding: 10px;
	border: 1px solid black;
}

$('body').click(function(event) {
	$('#text').html('cliqué: ' + event.target.nodeName);
});

Voir aussi

la méthode on,
qui permet d'attacher un gestionnaire d'événements à un élément
la méthode trigger,
qui permet de déclencher tous les gestionnaires d'événements, attachés à un élément pour des événements d'un type donné
la méthode triggerHandler,
qui permet de déclencher tous les gestionnaires d'événements, attachés à un élément
les événements jQuery