Médiaforma

jQuery – Evénements liés aux éléments du DOM

Print Friendly

Certains éléments du DOM génèrent des événements. Je les ai rassemblés dans ce tableau :

Méthode Événement géré
focus() Réception de focus par l’élément
blur() Perte de focus par l’élément
focusin() Réception de focus par l’élément ou un de ses enfants
focusout() Perte de focus par l’élément ou un de ses enfants
resize() Redimensionnement d’un élément
change() Modification d’un élément

 

A titre d’exemple, ce code utilise l’événement blur() pour tester la validité d’une zone de texte dans un formulaire.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test de la validité d'une zone de texte</title>

  </head>
  <body>
    <script src="jquery.js"></script>
    <table>
    <tr><td>Entrez un nombre compris entre 10 et 20</td><td><input type="text" id="saisie1" autofocus></td></tr>
    <tr><td>Entrez un texte</td><td><input type="text" id="saisie2"></td></tr>
    </table>
    <span id="message"></span>
    <script>
      $(function() {
        $('#saisie1').blur(function(){
          var zone1 = parseInt($('#saisie1').val());
          if ((zone1>=10) && (zone1<=20))
            $('#message').html('La valeur dans la première zone de texte entrée est valide');
          else
            $('#message').html('La valeur dans la première zone de texte entrée ne respecte pas la consigne');
        });
      });
    </script>
  </body>
</html>

 

Lorsque la première zone de texte perd le focus :

$('#saisie1').blur(function(){

 

Le contenu de la zone de texte est lu et mémorisé sous une forme entière (parseInt()) dans la variable zone1 :

var zone1 = parseInt($('#saisie1').val());

 

Si la valeur saisie est dans la fourchette autorisée, un message est affiché dans le span #message :

if ((zone1>=10) && (zone1<=20))
  $('#message').html('La valeur dans la première zone de texte entrée est valide');

 

Dans le cas contraire, un autre message est affiché dans le span #message :

else
  $('#message').html('La valeur dans la première zone de texte entrée ne respecte pas la consigne');

 

Exercice

Affichez la taille de la fenêtre suite à son redimensionnement

Note : L’élément window représente la fenêtre.

 

Solution

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Taille de la fenêtre au redimensionnement</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <span id="message">Redimensionnez la fenêtre</span>
    <script>
      $(function() {
        $(window).resize(function(){
          var x = $(window).width();
          var y = $(window).height();
          $('#message').html('Taille de la fenêtre : ' + x + 'px x ' + y + 'px');
        });
      });
    </script>
  </body>
</html>

 

Au redimensionnement de la fenêtre :

$(window).resize(function(){

Les nouvelles dimensions de la fenêtre sont stockées dans les variables x et y :

var x = $(window).width();
var y = $(window).height();

Puis affichées dans le span d’id #message :

$('#message').html('Taille de la fenêtre : ' + x + 'px x ' + y + 'px');

 

Remarque

Quelques autres événements sont dignes d’intérêt :

  • $(élément).load() est levé quand l’élément est entièrement chargé où élément peut être la page (window) ou un élément auquel est associé une URL (img, script, frame ou iframe).

  • $(window).unload() est levé quand l’utilisateur demande à changer de page

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply