O slideshow foi denunciado.

Javascript #8 : événements

493 visualizações

Publicada em

Javascript #8 : événements

Publicada em: Software
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Javascript #8 : événements

  1. 1. Javascript : Evénements
  2. 2. 1. Théorie
  3. 3. Event In computing, an event is an action or occurrence detected by the program that may be handled by the program. http://wikipedia.org
  4. 4. Event handler In computer programming, an event handler is a callback subroutine that handles inputs received in a program (called a listener in Java and JavaScript). http://wikipedia.org
  5. 5. Dom & mouse event click - mousedown - mouseup - mouseover - mousemove - mouseout
  6. 6. Dom & keyboard event keydown - keyup - keypress
  7. 7. Dom & element event focus - blur - change - select - submit
  8. 8. 2. Pratique
  9. 9. Ajouter un listener var htmlLinks = document.querySelector('a'); htmlLinks.addEventListener('mouseover', function() { console.log('Youre mouse is over a link'); });
  10. 10. Supprimer un listener function print(){ console.log('Youre mouse is over a link'); } var htmlLinks = document.querySelector('a'); htmlLinks.addEventListener('mouseover', print); htmlLinks.removeEventListener("mouseover", print);
  11. 11. L’objet event (1) Lorsqu'un évènement se produit, un objet évènement est créé dynamiquement, et passé séquentiellement aux « écouteurs » d'évènements qui sont autorisés à gérer l'évènement. L'interface DOM Event est alors accessible par le gestionnaire de fonction, via l'objet évènement passé comme premier (et unique) argument. https://developer.mozilla.org
  12. 12. L’objet event (2) var htmlLinks = document.querySelector('a'); htmlLinks.addEventListener('mouseover', function(event) { alert(typeof event); // object });
  13. 13. L’objet event (3) Toutes les propriétés et méthodes de l’objet event : https://developer.mozilla.org/fr/docs/DOM/event
  14. 14. Evénement & Propagation (1) var htmlLinks = document.querySelector('a'); var htmlDivs = document.querySelector('div'); htmlLinks.addEventListener('click', function() { console.log('You click a link'); }); htmlDivs.addEventListener('click', function() { console.log('You click a div'); }); <div> <a href="#"> <img src="img/logo.png"> </a> </div> Ex : http://jsfiddle.net/thecorneliusclub/xbp8x8pn/
  15. 15. Evénement & Propagation (2) var htmlLinks = document.querySelector('a'); var htmlDivs = document.querySelector('div'); htmlLinks.addEventListener('click', function(event) { alert('You click a link'); event.stopPropagation(); <div> <a href="#"> <img src="img/logo.png"> </a> </div> }); htmlDivs.addEventListener('click', function(event) { alert('You click a div'); }); Ex : http://jsfiddle.net/thecorneliusclub/r7mcv4zh/1/
  16. 16. Evénement & Propagation (3) <div> <a href="#"> <img src="img/logo.png"> </a> </div> Ex : http://jsfiddle.net/thecorneliusclub/jtntyr5k/ var htmlLinks = document.querySelector('a'); var htmlDivs = document.querySelector('div'); htmlLinks.addEventListener('click', function(event) { alert('You click a link'); event.preventDefault(); }); htmlDivs.addEventListener('click', function() { alert('You click a div'); });
  17. 17. Merci pour votre attention.
  18. 18. Bibliographie Eloquent JavaScript - Marijn Haverbeke http://eloquentjavascript.net Guide JavaScript - teoli, BenoitL, delislejm, Ame_Nomade, SphinxKnight https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide ECMAScript Language Specification - Ecma International http://ecma-international.org/ecma-262/5.1/ Javascript: The Definitive Guide - David Flanagan https://www.inkling.com/read/javascript-definitive-guide-david-flanagan-6th

×