Advanced Search

the Event Object

/ Published in: JavaScript
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. //hmtl code
  2.  <div class="link_box">
  3.     <a class="target" href="http://google.com" >Google.com</a>
  4.   </div>
  5.  
  6.   <input type="text" class="keyCatcher">
  7.  
  8.   <div class="log">
  9.     <h2>Log:
  10.     <ol></ol>
  11.   </div>
  12.  
  13.  
  14. //ev è un evento 
  15.  
  16. $(function(){
  17.   // Log a message to ".log ol"
  18.   function log(message){
  19.     $('.log ol').append("<li>"+message+"</li>")
  20.   }
  21.  
  22.   $('a.target').click(function(ev){
  23.     log("Clicked Link");
  24.     log("Target from link: " + ev.target);  //stampa nel log http://www.google.com
  25.     log("Current Target from link: " + ev.currentTarget);
  26.     log("Mouse at Page X:" + ev.pageX + " Page Y: " + ev.pageY);  //da la posizione x,y del click
  27.     //es se clicco sul link la pagina non cambia rimane li 
  28. 	ev.preventDefault();
  29. 	// ev.stopPropagation(); non propaga la l'evento agli elementi parenti
  30. 	//se ho più eventi in ascolto e voglio stopparli tutti devo utilizzare la funzione
  31. 	// stopImmediatePropagation
  32.   });
  33.  
  34.   $('.link_box').click(function(ev){
  35.     log("Box Clicked");
  36.     log("Target from box: " + ev.target);
  37.     log("Current Target from box: " + ev.currentTarget);
  38.   });
  39.  
  40.   $('.keyCatcher').keydown(function(ev){
  41.     log("Key Down: " + ev.which)    //ritorna i codici dei tasti cliccati
  42.   })
  43.  
  44.  
  45.  
  46.  
  47.  
  48.  
  49.  
  50.  
  51.  
  52.  
  53.  
  54. })

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.