Développement web

Cours 17

JavaScript

Événements

En JS, il est possible d'accomplir des actions quand un événement survient
Exemple : Le visiteur clique sur un bouton et un texte apparait

On appelle cela écouter un événément
(en anglais event listener)

Il existe des dizaines d'événements et ceux-ci dépendent de l'élément concerné

  • On peut écouter l'événement click sur une div
  • On peut écouter l'événement play sur un élément de type audio ou video
  • Mais on ne peut pas écouter l'événement play sur une div

Quelques exemples d'événements:

  • Click sur un bouton
  • Click sur une div
  • Play/Pause sur une vidéo
  • Chargement d'une image
  • Erreur de chargement d'une image
  • Scroll dans la page
  • Resize de la page
  • Curseur bouge
  • Touches du clavier appuyée
  • Rotation du smartphone
  • Envoie d'un formulaire
  • ...

Pour déclencher une action lors d'un événement, il faut utiliser une fonction. Dans cette situation, cette fonction est qualifiée de callback.


const foo = document.querySelector('.foo')

foo.onclick = () =>
{
    console.log('click !')
}

On peut écouter plusieurs événements différents sur un même élément


const foo = document.querySelector('.foo')

foo.onclick = () =>
{
    console.log('click !')
}

foo.onmouseover = () =>
{
    console.log('Mouse over !')
}

Liste d'événements de souris

  • onclick
  • onmousedown
  • onmouseup
  • onmouseenter
  • onmouseleave
  • onmouseover
  • onmouseout
  • onmousemove

Liste d'événements de clavier

  • onkeydown
  • onkeyup
  • onkeypress

☝️ Fonctionne à la fois sur la page entière (document), mais aussi sur des inputs de type text ou des textareas

Liste d'événements de formulaire

  • onchange
  • onfocus
  • onblur
  • onsubmit

Liste exhaustive des événements

Un paramètre est envoyé au callback et permet d'obtenir des informations sur l'événement.

Il suffit d'ajouter un paramètre à la fonction dont on choisit le nom. On utilise en général e ou event

Ce paramètre est un objet possédant plusieurs propriétés et méthodes


const foo = document.querySelector('.foo')

foo.onclick = (event) =>
{
    console.log(event.clientX)
}

L'une des ces méthodes est preventDefault() et permet d'annuler le comportement de base


const input = document.querySelector('input.foo')

input.onkeydown = (event) =>
{
    event.preventDefault()
    console.log('ok')
}

Le problème de cette écriture et l'impossibilité d'écouter plusieurs fois un événements.


foo.onclick = () =>
{
    console.log('click 1')
}

foo.onclick = () =>
{
    console.log('click 2')
}

Le premier événement ne sera jamais déclenché car il a été écrasé par le second

La solution est d'utiliser la méthode addEventListener() qui va rajouter un écouteur d'événement sans écraser les autres


foo.addEventListener('click', () =>
{
    console.log('click 1')
})

foo.addEventListener('click', () =>
{
    console.log('click 2')
})

Les deux événements seront déclenchés

Il est conseillé de toujours utiliser cette version ☝️