begin process at 2008 05 12 02:28:54
1 170 118 membres
21 nouveaux aujourd'hui
13 956 membres club

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum.
Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

CEE : Contrôler les Evênements sur les Eléments


Information sur le tutorial

Catégorie :Tutoriaux Date de création : 08/03/2008 12:08:06 Vu : 1 323 fois

Note :
Aucune note

Commentaire sur cette source (4)
Ajouter un commentaire et/ou une note


Description

Contrôler les Evênements sur les Eléments
ici, tout au plus, un regroupement des possibilités
de gérer les évênements sur les éléments HTML.

Tutorial


 :---------------------------------------------------:
 |     Contrôler les Evênements sur les Eléments     |
 :---------------------------------------------------:

pour expliquer, rien ne vaut un exemple  :  
      l'évênement    onload : lorsque l'élément est chargé
      ¯¯¯¯¯¯¯¯¯¯     la balise : body
     
     sera déclenché lorsque la page HTML aura été chargée.

_________________
1° dans la balise
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
 <body onload="des instructions javascript;">
 ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
 
  par exemple : <head>
  ¯¯¯¯¯¯¯¯¯¯¯      <script type="text/javascript">
                     var tmp;
                     function trt1(p1)
                     {   tmp=1;
                         alert(p1); }
                     function trt2(p2)
                     {   tmp=2;
                         alert(p2); }
                       </script>
                </head>
                <body onload="   trt1('test'); 
                                 tmp=0; 
                                 alert('page chargée'); 
                                 trt2('exemple'); ">
                </body>
            
  ce "n'est plus très à la mode" de mettre la gestion
   des évênements dans les balises.
   on préfère séparer le html du javascript 
      ( et du css, mais ici, on s'en balance )
   
________________________
2° création en dynamique
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
 window.onload=fonction;
 ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
  par exemple : <body>
                   <script type="text/javascript">
                     function init()
                     {   trt1('test'); 
                         tmp=0; 
                         alert('page chargée'); 
                         trt2('exemple');
                     }
                     window.onload=init;
                   </script>
                </body>
        
  inconvénient
   ne pas pouvoir passer de paramètres,
   pour mettre plusieurs instructions, il faut passer par
    une fonction intermédiaire.
  il "vaut donc mieux" faire :
  
  
 window.onload=function() { des instructions javascript; };
 ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
  par exemple : <body>
  ¯¯¯¯¯¯¯¯¯¯¯      <script type="text/javascript">
                     window.onload=function()
                     {   trt1('test'); 
                         tmp=0; 
                         alert('page chargée'); 
                         trt2('exemple');
                     }
                </body>
       
  inconvénient
   on écrase les fonctions qui pourraient avoir été définies
    au préalable pour cet évênement, dans cette balise.
  il "vaut donc mieux" faire :

_____________________
3° ajout en dynamique
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ 
 attachEvent ou addEventListener ( différence IE / FF et consors )
 ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
 
  par exemple : <body onload="alert('sera conservé');">
  ¯¯¯¯¯¯¯¯¯¯¯      <script type="text/javascript">
                     if ( window.attachEvent ) 
                        window.attachEvent
                           
( "onload", init() );
                     else   
   
                        
window.addEventListener
                           ( "load", init, false );
                   </script>
                </body>
        
  et/ou bien entendu ( ? )
  ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
  
        <script type="text/javascript">
         if ( window.attachEvent )
           window.attachEvent  ( "onload",
                    function()
                    { trt1('test');
                     tmp=0;
                     alert('page chargée');
                     trt2('exemple');
                    } 
                   );
         else  window.addEventListener (  "load",
                    function()
                    { trt1('test');
                     tmp=0;
                     alert('page chargée');
                     trt2('exemple');
                    },
                    false
                   );
        </script>       

  inconvénient
   pour donner plusieurs instructions, des paramètres...
   soit on doit faire appel à une fonction
   soit on répète les instructions puisque différences 
            IE / FF et consors
   
à vous de choisir ce qui, dans votre contexte,
 pour une application donnée... convient le moins mal  ;o)

ça ne change rien si on met le JavaScript dans un fichier .js

  • signaler à un administrateur
    Commentaire de ralecul le 09/03/2008 14:17:55

    Bonjour !

    Tout d'abord pour ceux qui sont restés un peu sur leur faim voici un petit lien :
    http://css.alsacreations.com/Tutoriels-JavaScript/La-gestion-des-evenements-en-JavaScript

    Il y a beaucoup de choses à dire sur la gestion des événements :
    - différence entre DOM-0 et DOM-2
    - différence entre les implémentations standard du w3c et celle de notre cher IE
    - gestion des callback membres d'une classe et de l'élément this
    - ...

    Ce qui explique la foultitude de framework javascript pour nous faciliter la vie (prototype & co).
    La conclusion qui manque à ton tuto est que la seule méthode viable est la solution 3 (DOM-2).
    Mais au lieu de dire que celà est contraignant car il faut gérer les différences IE / autres navigateurs,
    tu aurais pu donner des petits helpeurs pour la gestion d'event cross-browser.

    Exemple :
    ---------

    //Equivalent simpliste de Event.observe(element, eventName, handler[, useCapture = false]) de prototype
    function addEvent(element, eventName, callback)
    {
    if (element.addEventListener)
    element.addEventListener(eventName, callback, false);
    else if (element.attachEvent)
    element.attachEvent('on'+eventName, callback);
    }

    //Equivalent simpliste de Event.stopObserving(element, eventName, handler[, useCapture = false]) de prototype
    function removeEvent(element, eventName, callback)
    {
    if (element.removeEventListener)
    element.removeEventListener(eventName, callback, false);
    else if (element.detachEvent)
    element.detachEvent('on'+eventName, callback);
    }

    Ton exemple devient ainsi :

    function myCallBack()
    {
        alert('Page chargée');
    }

    addEvent(window, "load", myCallBack);

  • signaler à un administrateur
    Commentaire de XtremDuke le 10/03/2008 14:52:27

    Je rejoins l'avis de RALECUL.

  • signaler à un administrateur
    Commentaire de nicomilville le 28/03/2008 21:07:22

    Bon tutorial, même si comme ralecul l'a dit il faudrait peut être rajouter les différence entre les niveaux de DOM, etc mais ça reste quand même un très bon tutorial !!! Ce tutorial peut être très utile pour les débutant, il n'est ni trop dur ni trop facile, d'où le 10/10 !!!

    a++

  • signaler à un administrateur
    Commentaire de nicomilville le 28/03/2008 21:08:17

    Excuser moi mais la note n'est pas passé !!!

Ajouter un commentaire

Appels d'offres

Pub



CalendriCode

Mai 2008
LMMJVSD
   1234
567891011
12131415161718
19202122232425
262728293031 

Boutique

Boutique de goodies CodeS-SourceS