Javascript #8 : événements

1. Javascript : Evénements

2. 1. Théorie

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. 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. Dom & mouse event
click - mousedown - mouseup -
mouseover - mousemove - mouseout

6. Dom & keyboard event
keydown - keyup - keypress

7. Dom & element event
focus - blur - change - select - submit

8. 2. Pratique

9. Ajouter un listener
var htmlLinks = document.querySelector('a');
htmlLinks.addEventListener('mouseover', function() {
console.log('Youre mouse is over a link');
});

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. 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. L’objet event (2)
var htmlLinks = document.querySelector('a');
htmlLinks.addEventListener('mouseover', function(event) {
alert(typeof event); // object
});

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. 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. 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. 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. Merci pour votre attention.

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