Javascript : Evénements
1. Théorie
Event 
In computing, an event is an action or occurrence detected 
by the program that may be handled by the program. 
htt...
Event handler 
In computer programming, an event handler is a callback 
subroutine that handles inputs received in a progr...
Dom & mouse event 
click - mousedown - mouseup - 
mouseover - mousemove - mouseout
Dom & keyboard event 
keydown - keyup - keypress
Dom & element event 
focus - blur - change - select - submit
2. Pratique
Ajouter un listener 
var htmlLinks = document.querySelector('a'); 
htmlLinks.addEventListener('mouseover', function() { 
c...
Supprimer un listener 
function print(){ 
console.log('Youre mouse is over a link'); 
} 
var htmlLinks = document.querySel...
L’objet event (1) 
Lorsqu'un évènement se produit, un objet évènement est 
créé dynamiquement, et passé séquentiellement a...
L’objet event (2) 
var htmlLinks = document.querySelector('a'); 
htmlLinks.addEventListener('mouseover', function(event) {...
L’objet event (3) 
Toutes les propriétés et méthodes de l’objet event : 
https://developer.mozilla.org/fr/docs/DOM/event
Evénement & Propagation (1) 
var htmlLinks = document.querySelector('a'); 
var htmlDivs = document.querySelector('div'); 
...
Evénement & Propagation (2) 
var htmlLinks = document.querySelector('a'); 
var htmlDivs = document.querySelector('div'); 
...
Evénement & Propagation (3) 
<div> 
<a href="#"> 
<img src="img/logo.png"> 
</a> 
</div> 
Ex : http://jsfiddle.net/thecorn...
Merci pour votre attention.
Bibliographie 
Eloquent JavaScript - Marijn Haverbeke 
http://eloquentjavascript.net 
Guide JavaScript - teoli, BenoitL, d...
Prochain SlideShare
Chargement dans…5
×

Javascript #8 : événements

457 vues

Publié le

Javascript #8 : événements

Publié dans : Logiciels
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
457
Sur SlideShare
0
Issues des intégrations
0
Intégrations
67
Actions
Partages
0
Téléchargements
12
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×