Interagir avec les événements

JavaScript permet de capter les événements qui se produisent en interaction à la page HTML et d'exécuter des fonctions lorsqu'ils se déclenchent.

Rappel

Il est possible d'associer un attribut class et/ou id aux éléments HTML, afin de les identifier :

MéthodeIdentifier un élément avec document.querySelector

On peut stocker dans une variable l'adresse d'un élément HTML que l'on aura trouvé avec la fonction querySelector.

1
// Identify an element with a class
2
let element1 = document.querySelector('element1.class1')
3
4
// Identify an element with an id
5
let element2 = document.querySelector('element1#id1')
6
Exemple
1
<!DOCTYPE html>
2
<html lang="fr">
3
    <head>
4
      <title>Say Hello</title>
5
      <meta charset="utf-8">
6
      <script src="script.js" defer></script>
7
    </head>
8
    <body>
9
      <h1>JavaScript</h1>
10
      <p id="first-p">JavaScript (qui est souvent abrégé en « JS ») est un langage de script léger, orienté objet, principalement connu comme le langage de script des pages web. </p>
11
      <p>Le standard pour JavaScript est ECMAScript. En 2012, tous les navigateurs modernes supportent complètement ECMAScript 5.1.</p>
12
      <p class="say-hello"><b>Cliquez-moi pour dire bonjour</b></p>
13
      <p><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript">[source]</a></p>
14
    </body>
15
</html>
16
1
let p1 = document.querySelector('#first-p')
2
let p2 = document.querySelector('p.say-hello')
3
4
alert(p1.textContent)
5
alert(p2.textContent)
MéthodeAssocier un événement avec addEventListener.
On peut associer des événements à des éléments HTML avec la fonction addEventListener.
1
// Call function1 when element1 receive event1
2
element1.addEventListener('event1', function1)
3
Exemple
1
let p1 = document.querySelector('#first-p')
2
let p2 = document.querySelector('p.say-hello')
3
let body = document.querySelector('body')
4
5
p1.addEventListener('dblclick', printP1)
6
p2.addEventListener('click', sayHello)
7
body.addEventListener('keypress', printBody)
8
9
function sayHello() {
10
  alert('Tu as cliqué sur moi.')
11
}
12
13
function printP1() {
14
  alert('Merci de ne pas trop cliquer sur moi...')
15
}
16
17
function printBody() {
18
  alert('Hey, pas avec le clavier !')
19
}
20
1
<!DOCTYPE html>
2
<html lang="fr">
3
    <head>
4
      <title>Say Hello</title>
5
      <meta charset="utf-8">
6
      <script src="script.js" defer></script>
7
    </head>
8
    <body>
9
      <h1>JavaScript</h1>
10
      <p id="first-p">JavaScript (qui est souvent abrégé en « JS ») est un langage de script léger, orienté objet, principalement connu comme le langage de script des pages web. </p>
11
      <p>Le standard pour JavaScript est ECMAScript. En 2012, tous les navigateurs modernes supportent complètement ECMAScript 5.1.</p>
12
      <p class="say-hello"><b>Cliquez-moi pour dire bonjour</b></p>
13
      <p><a href="https://developer.mozilla.org/fr/docs/Web/JavaScript">[source]</a></p>
14
    </body>
15
</html>
16
ComplémentQuelques événements classiques
  • click, dblclick : quand l'utilisateur clique sur la souris
  • mouseover, mouseout : quand l'utilisateur passe au entre et sort d'un élément avec sa souris
  • keypress : quand l'utilisateur appuie sur une touche du clavier
  • change : quand un élément HTML change de valeur (par exemple un élément d'un formulaire)
  • load : quand la page HTML est totalement chargée
ComplémentTous les événements JavaScript
https://developer.mozilla.org/fr/docs/Web/API/event
ComplémentPour récupérer l'événement dans la fonction
1
element1.addEventListener('event1', (e) => function1(e))
2
ComplémentPour passer d'autres paramètres à la fonction
1
element1.addEventListener('event1', (e) => function1(e, x))
2