Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Javascript #8 : événements

520 Aufrufe

Veröffentlicht am

Javascript #8 : événements

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×