UPPREVIOUSNEXT  Technologies Internet et Education, © TECFA
  12. HTML Event

12. HTML Event

12.1 Rappel des événements prédéfinis dans Gecko

 

Event Handler

Event

element

window

Utilisateur

onblur

blur

x

x

on focalise sur un autre objet
(bouger, cliquer, etc ailleurs )

onclick

click

x

x

on clique sur un objet

ondblclick

dblclick

x

 

 

onfocus

focus

x

x

on focalise sur l’objet

onkeydown

keydown

x

x

une touche reste enfoncée

onkeypress

keypress

x

x

une touche est enfoncée

onkeyup

keyup

x

x

 

onmousedown

mousedown

x

x

clique avec la source

onmousemove

mousemove

x

x

on bouche la souris

onmouseout

mouseout

x

x

on déplace la souris ailleurs

onmouseover

mouseover

x

x

on déplace la souris sur l’objet

onmouseup

mouseup

x

x

on lache un bout de souris

onresize

resize

x

x

on diminue une fenetre

onload

load

 

x

on charge une fenêtre dans les navi.

onunload

unload

 

 

contenu part
(on charge un autre document)

onclose

close

 

x

on ferme une fenêtre

ondragdrop

dragdrop

 

x

 

onscroll

scroll

 

x

on scroll le contenu d’une fenêtre

 

 

 

 

 

Principe

<div onclick="traitement();">click me!</div>
<div id="mon_div" onclick="traitement();">click me!</div>
mon_el = document.getElementById("mon_div");
mon_el.onclick // retourne le nom de la fonction qui gère le onclick
function onclick(event) {
   traitement (); }

12.2 Construire des Event Listeners

A. Comme nos parents: inline

<script type="text/JavaScript">
function showPopup() {
 alert("Attention on va vous empester avec une pub !!" );
 var popup = window.open("http://tecfa.unige.ch/maltt/", "popup",
                         "height=800,width=600");
       popup.focus();
       return false;
      }
</script>
    
<body onload="load();">
    <div onClick="Javascript:showPopup();">CLICK ME !!</div>

B. Informel (marche avec IE et Firefox/Mozilla)

Exemple 12-1: Event Listener façon rapide

function load() {      
  var p
 = document.getElementById
('mon_div
');
  p.onclick = showPopup; // Il s’agit de donner le NOM de la fonction
  }
 
function showPopup()
 {
  alert("Attention on va vous empester avec une pub !!" );
   var popup = window.open("http://tecfa.unige.ch/maltt/", "popup",                           "height=800,width=600");
       popup.focus(); return false;
      }
.....
<body onload="load();">
<div id="mon_div">CLICK ME !!</div>
 
 

C. Selon la spécification DOM addEventListener

Exemple 12-2: L’interface addEventListener

     // Exemple 1 d'enregistrement d'évènement
      function l_func()
 {
        var t2 = document.getElementById("t2");
        t2.innerHTML = "trois c'est mieux que deux !";    
      }
 
      // Exemple 2 d'enregistrement d'évènement
      function touche
 () {
        alert ("je t'ai vu toucher !!");
        document.getElementById("table2").style.border = "yellow";
      }
 
      function load() { 
         var el = document.getElementById("table"); 
         el.addEventListener("click", l_func, false); 
         var el2 = document.getElementById("table2"); 
         el2.addEventListener("mouseover", touche, false)
; 
      } 

12.3 Gestion de l’événement

var x_td;
      var y_td;
 
      // Exemple  d'enregistrement d'évènement
      function touche (event) {
 
        x = event.pageX;
        y = event.pageY;
        obj = event.target;
        // alert ("je t'ai vu toucher \n aux positions x=" + x + ",y=" + y + "\n à l\'objet " + obj);
        x_td.innerHTML = x;
        y_td.innerHTML = y;
        obj_td.innerHTML = obj.innerHTML;
      }
 
  
      function load() { 
         var el2 = document.getElementById("table2"); 
         if (el2.addEventListener) el2.addEventListener("mouseover", touche, false)
         // for those who can't use a real browser
            else alert ("Sorry you need a browser that understands DOM Level 2 Events");
         x_td = document.getElementById("x"); 
         y_td = document.getElementById("y"); 
         obj_td = document.getElementById("obj"); 
      } 
   </script> 
 
 
 </head>
 
 <body onload="load();"> 
    <h1>Gecko DOM addEventListener example</h1>
 
Ceci est une démo d'un EventHandler pour l'événement mouseover enregistré pour la table.
Bougez la souris sur le tableau SVP:
 
 
    <table align="center" id="table2"> 
	<tr><td>Ma tete</td></tr> 
	<tr><td>Ma poitrine</td></tr> 
	<tr><td>Mon ventre</td></tr> 
	<tr><td>Mes jambes</td></tr> 
    </table> 
    
<p>
Tu a commencé à me toucher aux coordonnées:
    <table align="center" id="coordinates"> 
	<tr><td>X = </td>  <td id="x"> </td></tr> 
	<tr><td>Y = </td>  <td id="y"> </td></tr> 
	<tr><td>Objet = </td>  <td id="obj"> </td></tr> 
    </table> 
 

UPPREVIOUS NEXT -- TIE