jQuery offre une multitude de méthodes qui permettent de lancer du code en réaction à un événement.
Je vous présente ici les principales que vous serez appelés à utiliser.
Pour réagir à un clic sur un élément dont la classe est maclasse :
$( ".maclasse" ).click(function() {
...
});
Pour que ceci fonctionne, il faut que, lorsque ce code est exécuté, l'élément dont la classe est maclasse soit déjà chargé dans le DOM. Donc, pour vous en assurer :
$(function() {
$( ".maclasse" ).click(function() {
...
});
});
Parfois, on voudra empêcher le comportement normal, par exemple changer de page quand on clique sur un lien.
Pour y arriver :
$(function() {
$( ".maclasse" ).click(function(event) {
event.preventDefault();
...
});
});
Pour réagir lorsque la souris passe par-dessus (survole) un élément dont la classe est maclasse :
$(function() {
$( ".maclasse" ).hover(function() {
...
});
});
Il est possible d'ajouter une seconde fonction anonyme pour déterminer ce qui doit être exécuté lorsque la souris n'est plus par-dessus l'élément.
$(function() {
$( ".maclasse" ).hover(
function() {
... // exécuté lorsque la souris passe par-dessus l'élément
},
function() {
... // exécuté lorsque la souris n'est plus par-dessus l'élément
}
);
});
Pour réagir lorsqu'un élément dont la classe est maclasse obtient le focus :
$(function() {
$( ".maclasse" ).focus(function() {
...
});
});
Et lorsqu'il perd le focus :
$(function() {
$( ".maclasse" ).blur(function() {
...
});
});
« Events ». jQuery. https://api.jquery.com/category/events/
▼Publicité
