JavaScriptEvénement on
La gestion événementielle avec JQuery
Méthode on
La méthode jQuery .on() est votre clé pour travailler avec les événements.- .on('click', function() { ... }
- .on('scroll', function() { ... }
- .on('hover', function() { ... }
- .on('mouseover', function() { ... }
- .on('mouseenter', function() { ... }
- .on('mouse leave', function() { ... }
- .on('keydown', function() { ... }
- .on('keyup', function() { ... }
- .on('keypress', function() { ... }
- .on('focus', function() { ... }
- .on('blur', function() { ... }
- .on('resize', function() { ... }
Méthode on
Syntaxe de base$('élément').on('évènement', function() {
// Une ou plusieurs instructions jQuery pour gérer l'événement
}Exemple
$('p').on('click', function() {
alert("Quelqu'un a cliqué sur un paragraphe!")
});L'objet event
Pour interagir avec l'objet "event" dans votre fonction, passez l'événement en tant que paramètre dans la fonction.Exemple
let $p = $('p');
$p.on('click', function(event) {
let date = new Date(event.timeStamp);
$p.text("Vous avez cliqué le : " + date)
});Exemple de clic sur un lien (a)
<a href="#">Coucou</a>
<script src="js/jquery.js"></script> // appel de la bibliothèque jQuery
<script>
// <![CDATA[
$(document).ready(function() {
$("a").click(function() { alert("Découvrez Easy-Micro"); });
});
//]]>
</script>Clique Jquery qui fait apparaître une image en slideDown
<div id="clickme">Clique ici</div>
<img id="monlogo" src="images/jquery-logo.png" alt="">
<script src="js/jquery.js"></script> // appel de la bibliothèque jQuery
<script>
$(function() {
$('#monlogo').hide();
$('#clickme').on('click',function() {
if($('#monlogo').is(':hidden')) {
$('#monlogo').slideDown('slow');
} else {
$('#monlogo').hide();
}
});
});
</script>Le clavier
- click() : Clic gauche
- keydown() : Appui sur une touche du clavier
- keyup() : Relâchement d'une touche du clavier préalablement enfoncée
- keypress() : Maintien d'une touche du clavier enfoncée
Exemple
<script>
$(function() {
$('#montextarea').keydown(function(){
$('#madiv').css('background-color', 'green');
});
$('#montextarea').keyup(function(){
$('#madiv').css('background-color', 'white');
});
});
</script>Le code jQuery ci-dessus met en place deux procédures événementielles : une relative à l'événement keydown et l'autre à l'événement keyup. Lorsqu'une touche du clavier est enfoncée, la couleur d'arrière-plan de la balise <div> devient verte. Lorsque la touche est relâchée, la balise redevient blanche.
