tuto JS (4) Les événements

http://www.siteduzero.com/tutoriel-3-379722-les-evenements.html

Je pense (j'espère en fait) que je vais moins en apprendre que dans le chapitre précédent. Les événements, je connais un chouïa.

Quels sont les événements ?

click ------------------------------> cliquer puis relâcher
dblclick --------------------------> double-cliquer
mouseover -----------------------> faire passer le curseur au dessus de l'élément
mouseout ------------------------> faire sortir le curseur de l'élément
mousedown ---------------------> appuyer sans relâcher sur le bouton gauche de la souris
mouseup -------------------------> relâcher le bouton gauche de la souris
mousemove----------------------> faire déplacer le curseur sur l'élément
keydown-------------------------> appuyer (sans relâcher) une touche de clavier sur l'élément
keyup-----------------------------> relâcher...
keypress--------------------------> frapper (appuyer puis relâcher) une touche de clavier sur l'élément
focus------------------------------> cibler l'élément
blur--------------------------------> annuler le ciblage de l'élément
change----------------------------> changer la valeur spécifique d'un élément
select------------------------------> Sélectionner le contenu d'un champ de texte

Il y a également deux événements qui s'appliquent à l'élément form :

submit-------------------------------> envoyer le formulaire
reset--------------------------------->  réinitialiser le formulaire


Petites précisions sur le focus : Le focus est en quelque sorte le ciblage.

onClick c'est pas forcément que dans un lien... Suffit de cliquer dessus et hop.

<span onclick="alert('Voici le contenu de l\'élément que vous avez cliqué :\n\n' + this.innerHTML);">Cliquez-moi !</span>

Du coup, qu'est-ce que c'est que "this" ?
Semble-t-il cela peut poser des problèmes avec IE et le DOM2 ?! Mais sinon, ça renvoie le nom de l'élément en cours d'utilisation.

<input id="input" type="text" size="50" value="Cliquez ici !" onfocus="this.value='Appuyez maintenant sur votre touche de tabulation.';" onblur="this.value='Cliquez ici !';"/>
<a href="#" onfocus="document.getElementById('input').value = 'Vous avez maintenant le focus sur le lien, bravo !';">Un lien bidon</a>

J'apprends un truc super pratique :
si dans un lien, on ajoute un alert si on clique, et qu'on veut bloquer la redirection du lien, il suffit de faire un "return false", comme ce qui suit :

<a href="http://www.siteduzero.com" onclick="alert('Vous avez cliqué !'); return false;">Cliquez-moi !</a>

ne pas oublier le ; ;)

Règle utile à connaître : ne pas mettre de js dans l'attribut href, c'est mal.
Ce qu'on peut faire, si on souhaite utiliser du js dans un lien sans ouvrir de page, c'est qu'on peut indiquer un lien #, une action onClick, et un return false, comme dans le cas suivant :

<a href="#" onclick="alert('Vous avez cliqué !'); return false;"<Cliquez-moi !</a>

Dans ce cas,le lien est #, et quand on clique, ça renvoie automatiquement false, DONC rien ne se passe. Ca laisse accessoirement la possibilité d'ajouter un lien en href quand même, au cas où on n'a pas js.
Ceci dit, en bonne technique, il convient plutôt d'utiliser l'élément button que a.

Les événements au travers du DOM

<span id="clickme">Cliquez ici !</span>

<script>
var element = document.getElementById('clickme');
    element.onclick = function () {
        alert("Vous m'avez cliqué !");
    } 

Pour supprimer un événement avec DOM 0, on fera comme suit : element.onclick = function () {};

DOM2

On fera la même chose de cette façon, avec DOM2 :

<span id="clickme">Cliquez-moi !</span>

<script>

  var element = document.getElementById('clickme');

  element.addEventListener('click', function() {
      alert("Vous m'avez cliqué !");
  }, false);

</script> 

Dans ce cas, on n'utilise pas une propriété, mais une méthode.
addEventListerner('événement', function() {}); c'est un peu la même chose quoi...
Attention, ceci ne fonctionne pas sur IE8 ni antérieur.
On passe trois paramètres :

1.  le nom de l'événement (sans on)
2.  une fonction à exécuter
3. un booléen, pour savoir si on utilise le bouillonnement ?! (à voir plus tard). Soit, on retient surtout qu'habituellement, ici, on met "false".

On peut écrire ça un petit peu autrement :

<span id="clickme">Cliquez-moi !</span>
var element = document.getElementById('clickme');
function funky() {
alert('Je suis cliqué !');
}
element.addEventListener('click', funky(), flase); 

L'avantagede DOM2 (et donc de cette méthode) c'est que l'on peut mettre plusieurs événements à la suite sur un même élément, le cas échéant, et dans ce cas, ça ouvre plusieurs fenêtres à la suite, comme dans l'exemple qui suit :

<span id="clickme">Cliquez-moi !</span>

<script>

  var element = document.getElementById('clickme');

  // Premier événement click
  element.addEventListener('click', function() {
      alert("Et de un !");
  }, false);
  
  // Deuxième événement click
  element.addEventListener('click', function() {
      alert("Et de deux !");
  }, false);

</script>

Cependant, gardons à l'esprit que l'ordre d'exécution n'est pas forcément dans l'ordre d'écriture... C'est un peu aléatoire, en effet.

Pour supprimer l'événement, on utilise la méthode removeEventListener('click', funky(), false);
On met false également, on passe les mêmes arguments.

Attention, comme IE ne gère pas cette méthode très bien, on utilisera souvent ceci pour bien faire :

function addEvent(element, event, func) {

    if (element.addEventListener) { // Si notre élément possède la méthode addEventListener()
        element.addEventListener(event, func, false);
    } else { // Si notre élément ne possède pas la méthode addEventListener()
        element.attachEvent('on' + event, func);
    }

}

addEvent(element, 'click', function() {
    // Votre code
});

Il faut prendre garde à nommer la fonction si on veut l'enlever parce qu'annuler une fonction anonyme c'est vachement plus compliqué : il faut faire appel à sa référence, sinon.

addEventListener ne fonctionne pas sous IE. Il faut donc ruser et utiliser une autre méthode :
attachEvent, qui ne prend que deux arguments.
On retire avec detachEvent, comme dans l'exemple qui suit.

// On crée l'événement
element.attachEvent('onclick', function() {
    alert('Tadaaaam !');
});

// On supprime l'événement en lui repassant les mêmes paramètres
element.detachEvent('onclick', function() {
    alert('Tadaaaam !');
});

voilà, je me suis embrouillée, mais bon, on peut retrouver ça facile...

Capture, bouillonnement, non, il ne s'agit pas de cerveau.

La capture s'effectue avant l'événement, tandis que le bouillonnement (bubbling), après.
Mais qu'est-ce que c'estque la "propagation d'un événement" ?

Prenons deux éléments html comme ce qui suit :

<div>
    <span>blabla</span>
</div>

La question est de savoir ce qui se passe si l'on attribue une valeur à onclick à chacun des deux éléments et qu'on clique sur le texte. Lequel va se déclencher en premier ??

Si on fait appel à la capture, c'est div d'abord. Si c'est le bouillonnement, c'est span d'abord.Pour utiliser la capture, dans les args, on passe "true", et pour le bouillonnement, "false".

Donc, quand on utilise la capture, on met "true" dans les arguments passés, et par conséquent, on ira de l'extérieur vers l'intérieur, dans le cas de "false", on utilise le bouillonnement, c'est de l'intérieur vers l'extérieur.
Pour en connaître plus sur le sujet, lire ces recommandations du W3C :
http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

attachEvent() avec IE ne gère pas la capture, mais le bouillonnement, et sans le DOM, ou en DOM2 : pareil, si bien qu'on n'utilise quasi jamais cela, on met donc globalement le troisième argument de attachEvent() à false, ainsi qu'addEventListener().

Cette leçon est à relire : j'ai un peu survolé...

L'Objet Event

https://developer.mozilla.org/en-US/docs/DOM/event
A lire...

Cet objet sert à récupérer des éléments sur l'objet actuellement déclenché. On n'y accède que par l'intermédiaire d'une fonction. On fait comme suit, avec DOM-0

element.onclick = function(e) {
alert(e.type); // ceci affiche le type d'élément (onclick, over etc.)
}

Et avec DOM-2

element.addEventListener('click', function(e){ 
alert(e.type); 
}, false);

Convention :quand on passe un événement en paramètre, généralement, on le nomme e.

/!\ IE : Pour la méthode avec DOM-0, pour utiliser la méthode Event, on doit passer par window.event, donc, on n'a pas besoin de passer l'argument en (e).
Avec DOM-2, on n'est pas "obligé" d'utiliser window.event
Pour s'y retrouver entre les version, on conseille d'utiliser cette syntaxe utilisée dans la fonction utilisée par l'événement:

e = e || window.event;

Les fonctionnalités d'Event 

L'une les propriétés les plus importantes est target. Elle permet de récupérer une référence vers l'élément dont l'événement a été déclenché. (comme this)
On peut modifier le contenu de ce qui vient d'être sélectionné :
On définit donc d'abord l'élément qui répond à cet événement. Et puis on peut mettre plusieurs trucs hein :

<span id="clickme">Cliquez-moi !</span>
<script>
    var clickme = document.getElementById('clickme');
  
    clickme.addEventListener('click', function(e) {
        e.target.innerHTML = 'Vous avez cliqué !';
    }, false);
    clickme.addEventListener('mouseover', function(e) {
        e.target.innerHTML = 'vous avez mouseoverisé...';
    }, false);
</script>

Comme d'hab,IE < 9 ne supporte pas cette propriété. Il faut donc encore ruser, car en fait, il la supporte mais à sa manière (avec srcElement).
Alors, voilà un exemple pour la compatibilité avec IE, que j'explique un peu après :

<span id="clickme">Cliquez-moi !</span>

<script>
    function addEvent(element, event, func) { // On réutilise notre fonction de compatibilité pour les événements DOM-2
        if (element.addEventListener) {
            element.addEventListener(event, func, false);
        } else {
            element.attachEvent('on' + event, func);
        }
    }

    var clickme = document.getElementById('clickme');

    addEvent(clickme, 'click', function(e) {
        var target = e.target || e.srcElement; // Si vous avez oublié cette spécificité de l'opérateur OU, allez voir le chapitre des conditions
        target.innerHTML = 'Vous avez cliqué !';
    });
</script>

On ajoute une fonction addEvent qui est compatible avec IE < 9, comme on l'a vu plus tôt.
addEvent est donc désormais une fonction qui prend trois arguments : l'élément en question, l'événement, et la fonction.
clickme est l'élément récupéré.
Dans addEvent, pour récupérer l'élément, on utilise soit e.target, soit e.srcElement

Il me faut utiliser ça pour comprendre, parce que là, je capte même pas à quoi ça sert, quoi.

Récupérer l'élément à l'origine du déclenchement de l'événement.

Ceci est intéressant pour comprendre, cela dit, ne sert pas parce que les versions antérieures à IE9 ne supportent pas de choses alternatives, alors c'est jamais compatible :
Pour récupérer l'événement à l'origine du déclenchement, si on utilise target, on récupère (ou srcElement) l'élément direct au dessus, mais pas le parent.
Pour ça, faut utiliser :e.currentTarget.id;
Voir sur le site, je pense pas que ça va me servir beaucoup...

Récupérer les coordonnées du curseur

Youpi, enfin un truc qui m'intéresse !
Donc, on a deux méthodes pour récupérer les coordonnées de la souris :
clientX ou clientY pour les coordonnées de X ou de Y. On peut les avoir en fonction de la position sur l'écran, ou la page web. On sera plutôt sur la page web, nous...

Ne pas utiliser alert, parce que ça dépote sinon...
Et puis, pour récupérer ça, l'événement le plus approprié est mousemove :

<div id="position"></div>

<script>
    var position = document.getElementById('position');
  
    document.addEventListener('mousemove', function(e) {
        position.innerHTML = 'Position X : ' + e.clientX + 'px
Position Y : ' + e.clientY + 'px';
    }, false);
</script>

Là moi je vois plein d'intérêts, mais on verra plus tard.

Récupérer l'élément en rapport avec un événement de la souris

relatedTarget

Bon bref.

Résoudre les problèmes d'héritage

Mettons que vous en aviez marre de votre grand-père...
Non, mais non... Oh, ça va, je parle d'héritage en web, en css, et js.
Par exemple, on fait un div, imrbiqué dans un autre, on veut dire quand le curseur entre ou sort de la zone de ce div.
Ca devrait fonctionner comme l'exemple du dessus ! Simplement !!

Sauf que non, attention aux éléments
mouseover, mousedown, mousemove, click...

Pour pallier ce problème : on va utiliser relatedTarget, justement.
http://www.siteduzero.com/tutoriel-3-622453-resoudre-les-problemes-d-heritage-des-evenements.html franchement, j'ai pas envie de retenir ça, je laisse le lien ici si j'en ai besoin.

Bon, j'ai fait une faute au QCM mais en gros, ça va.

Youpi, j'ai fini ce gros morceau super chiant !!