blob: 98c64c2b50866e4cd1bd7536e0c1433d36308ab7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
---
title: EventListener
slug: Web/API/EventListener
translation_of: Web/API/EventListener
browser-compat: api.EventListener
---
{{APIRef("DOM Events")}}
L'interface **`EventListener`** représente un objet qui peut gérer un évènement diffusé par un objet [`EventTarget`](/fr/docs/Web/API/EventTarget).
> **Note :** En raison du besoin de compatibilité avec le contenu existant, `EventListener` accepte à la fois une fonction et un objet avec une fonction de propriété `handleEvent`. Ceci est illustré dans l'[exemple](#exemple) ci-dessous.
## Propriétés
_Cette interface n'implémente ni n'hérite d'aucune propriété._
## Méthodes
_Cette interface n'hérite d'aucune méthode._
- [`EventListener.handleEvent()`](/fr/docs/Web/API/EventListener/handleEvent)
- : Une fonction qui est appelée lorsque se produit un événement du type spécifié.
## Exemple
### HTML
```html
<button id="btn">Cliquez ici !</button>
<p id="funcOutput"></p>
<p id="handleEvtOutput"></p>
```
### JavaScript
```js
const buttonElement = document.getElementById('btn');
const funcOutput = document.getElementById('funcOutput');
const handleEvtOutput = document.getElementById('handleEvtOutput');
// On ajoute un gestionnaire pour l'évènement 'click' en fournissant
// une fonction de rappel (callback).
// Lorsqu'on clique sur l'élément, la sortie "Élément cliqué avec une fonction !"
// apparaîtra dans le paragraphe avec l'identifiant "funcOut".
buttonElement.addEventListener('click', function (event) {
funcOutput.textContent = 'Élément cliqué avec une fonction !';
});
// À des fins de compatibilité, un objet qui n'est pas une fonction
// mais qui possède une propriété `handleEvent` sera traité comme si
// cette propriété avait été passée comme argument fonctionnel.
// La sortie "Élément cliqué via la propriété handleEvent !"
// apparaîtra simultanément dans le paragraphe avec l'identifiant
// "handleEvtOutput".
buttonElement.addEventListener('click', {
handleEvent: function (event) {
handleEvtOutput.textContent = 'Élément cliqué via la propriété handleEvent !';
}
});
```
### Résultat
{{EmbedLiveSample('Exemple')}}
## Spécifications
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
### See also
- [`addEventListener`](/fr/docs/Web/API/EventTarget/addEventListener)
|
