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 : 6 284 fois

Note :
Aucune note

Commentaire sur cette source (6)
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é !!!

signaler à un administrateur
Commentaire de nicomilville le 12/05/2008 12:30:49

on pourrait aussi parler de prototype !

signaler à un administrateur
Commentaire de enkyll le 29/11/2008 03:02:52

Prototype (ou encore JQuery, Mootools ...) sont des frameworks éprouvés et n'ont place dans  ce tutorial pur javascript (Ce serait comme quelque peu utiliser MFC ou VCL en C++ ).
Le tutorial est correct mais comme le précise Ralecul, seul l'ajout d'évènements DOM devrait être usité.
Quelques remarques :
1 - la conservation ou propagation du scope : pour simplifier, le mot clef 'this' faisant référence à l'objet ayant subit l'action n'est valable que dans son contexte d'exécution. Si, par exemple, la fonction évènementielle est appelée par une méthode prototypée, le contexte sera celui du parent de l'objet prototypé et non plus celui de l'élément HTML. Il faudra donc retablir le contexte lors de l'appel de la fonction évènementielle par un call ou apply (cf. définitions).
2 - Si l'adjonction d'évènement peut s'avèrer aisé, la suppression de ces mêmes évènements est complexe dans le sens où chaque évènement ne peut être supprimé que dans le même scope d'appel.
3 - window.onload n'est déclenché qu'au chargement complet de la page (images etc.) et pas au chargement de son squelette architectural (arbre DOM).

Ajouter un commentaire



Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Comparez les prix Nouvelle version

Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,016 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.