Easy-Micro

LANGAGE JavaScript
Evé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!")
});
Source : openclassrooms.com

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.Source : openclassrooms.com

Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]