recursal/MDN huggingface dataset:
Event.currentTarget
===================

La propriété **`currentTarget`**, accessible en lecture seule et rattachée à l'interface `Event`, identifie la cible courante pour l'évènement lorsque celui-ci traverse le DOM. Elle fait toujours référence à l'élément sur lequel le gestionnaire d'évènement a été attaché tandis que `Event.target` identifie l'élément à partir duquel l'évènement s'est produit (`event.target` peut donc être un descendant de `event.currentTarget`).

Syntaxe
-------


```js
var currentEventTarget = event.currentTarget;
```

### Valeur

`EventTarget`Exemples
--------

`Event.currentTarget` peut s'avérer utile lorsqu'on attache le même gestionnaire d'évènement à plusieurs éléments.


```js
// Cette fonction masque la cible courante de l'évènement
// et l'affiche dans la console.
function hide(e) {
  e.currentTarget.style.visibility = "hidden";
  console.log(e.currentTarget);
  // Lorsque cette fonction est utilisée en gestionnaire d'évènement
  // on aura this === e.currentTarget
}

var ps = document.getElementsByTagName("p");

for (var i = 0; i < ps.length; i++) {
  // On affiche l'élément <p> qui a été cliqué dans la console
  ps[i].addEventListener("click", hide, false);
}
// On affiche l'élément <body> dans la console
document.body.addEventListener("click", hide, false);
```


**Note :** La valeur de `event.currentTarget` est **uniquement** disponible lorsque l'évènement est géré. Ainsi, on ne pourra pas observer la valeur de `currentTarget` *a posteriori* (ex. si on a stocké la valeur d'`event` dans une variable lors de la gestion de l'évènement puis qu'on utilise celle-ci plus tard, `event.currentTarget` aura la valeur `null`).

Spécifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-currenttarget② |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Comparaison des différentes cibles pour les évènements
event.defaultPrevented
======================

Résumé
------

Retourne un booléen indiquant si `event.preventDefault()` a été appelée sur l'évènement ou non.

**Note :** Cette propriété doit etre utilisée au lieu de la méthode `getPreventDefault()` qui n'est pas standard et est désormais dépréciée (voir bug Firefox 691151).

Syntaxe
-------


```js
bool = event.defaultPrevented;
```

Exemple
-------


```js
if (e.defaultPrevented) {
  /\* Le comportement par défaut a été inhibé \*/
}
```

Spécifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-defaultprevented① |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event()
=======

Le constructeur **`Event()`** crée un nouvel `Event` (*évènement*).

Syntaxe
-------


```js
event = new Event(typeArg, eventInit);
```

### Valeurs

*typeArg*

C'est une `DOMString` (*chaîne de caractères*) représentant le nom de l'évènement.

*eventInit*Facultatif

C'est un dictionnaire `EventInit` ayant les champs suivants :

* `bubbles`: (facultatif) un `Boolean` indiquant si les événements sont propagés . Par défaut est `false` (*faux*).
* `cancelable`: (facultatif) un `Boolean` indiquant si l'évènement peut être annulé. Par défaut est `false` (*faux*) .
* `composed`: ( facultatif ) un `Boolean` indiquant si l'évènement déclenchera les écouteurs en dehors d'une racine shadow (voir `Event.composed` (en-US) pour plus de détails). Par défaut est `false` (*faux*) .

Exemple
-------


```js
// crée un évènement "look" qui est diffusé et ne peut être annulé
var evt = new Event("look", { bubbles: true, cancelable: false });
document.dispatchEvent(evt);

// l'événement peut être envoyé à partir de n'importe quel élément, pas seulement le document
myDiv.dispatchEvent(evt);
```

Spécifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-event |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `Event`
Event.cancelable
================

La propriété *`cancelable`* (*annulable*) de "Event" Indique si l'événement peut être annulé et donc empêché, comme si l'événement ne s'était jamais produit. Si l'événement n'est pas annulable, alors sa propriété `cancelable` est à `false` (*faux*) et l'écouteur d'événement ne peut pas l'arrêter.

L'appel de `preventDefault()` sur un évènement qui ne peut être annulé produit une erreur, aussi les écouteurs d'évènement qui gèrent de nombreux types d'évènements peuvent être vérifiés avec `cancelable` avant d'appeler leurs méthodes `preventDefault()`.

La plupart des événements natifs du navigateur qui peuvent être annulés sont ceux qui résultent de l'interaction de l'utilisateur avec la page. L'annulation des événements click, scroll ou beforeunload empêcherait l'utilisateur de cliquer sur un élément, de faire défiler la page ou de la quitter, respectivement.

Syntaxe
-------


```js
bool = event.cancelable;
```


* Le résultat est un `booléen` qui est `true` (*vrai*) si l'événement peut être annulé.
Exemple
-------

Par exemple, les vendeurs de navigateurs proposent que l'évènement `wheel` (en-US) puisse être annulable seulement la première fois que l'écouteur est appelé (ressource en anglais) ; les évènements `wheel` suivants ne peuvent être annulés.


```js
function preventScrollWheel(event) {
  if (typeof event.cancelable !== "boolean" || event.cancelable) {
    // L'événement peut être annulé, alors nous le faisons.
    event.preventDefault();
  } else {
    // L'évènement ne peut pas être annulé, il n'est donc pas sûr
    // d'appeler preventDefault() sur lui.
    console.warn(`The following event couldn't be canceled:`);
    console.dir(event);
  }
}

document.addEventListener("wheel", preventCancelableEvents);
```

Notes
-----

Si l'événement peut être annulé, ou non, est déterminé au moment de l'initialisation de celui-ci.

Pour annuler un événement, utiliser la méthode `preventDefault()` sur celui-ci. Cela permet d'empêcher l'action par défaut associée à l'événement de s'exécuter.

Spécifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-cancelable② |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Event.preventDefault()
======================

La méthode **`preventDefault()`**, rattachée à l'interface `Event`, indique à l'agent utilisateur que si l'évènement n'est pas explicitement géré, l'action par défaut ne devrait pas être exécutée comme elle l'est normalement.

L'évènement continue sa propagation habituelle à moins qu'un des gestionnaires d'évènement invoque `stopPropagation()` ou `stopImmediatePropagation()` pour interrompre la propagation.

Comme indiqué ci-après, appeler **`preventDefault()`** n'aura aucun effet pour un évènement qui ne peut être annulé (comme ceux émis par `EventTarget.dispatchEvent()` sans avoir indiqué `cancelable: true`).

Syntaxe
-------


```js
event.preventDefault();
```

Exemples
--------

### Bloquer la gestion du clic par défaut

Lorsqu'on clique sur une case à cocher, par défaut, cela coche ou décoche la case. Dans cet exemple, on illustre comment bloquer ce comportement par défaut :

#### JavaScript


```js
document.querySelector("#id-checkbox").addEventListener(
  "click",
  function (event) {
    console.log("Désolé ! preventDefault() ne vous laissera pas cocher ceci.");
    event.preventDefault();
  },
  false,
);
```


#### HTML


```html
<p>Essayez de cliquer sur la case à cocher.</p>

<form>
  <label for="id-checkbox">Checkbox:</label>
  <input type="checkbox" id="id-checkbox" />
</form>
```


#### Résultat

### Empêcher les pressions du clavier sur un champ texte

Dans l'exemple qui suit, on démontre comment empêcher d'écrire au clavier dans un champ texte grâce à `preventDefault()`.

#### HTML

Voici le formulaire contenant le champ texte :


```html
<form>
  <label
 >Un champ texte
    <input type="text" id="mon-champ-texte" />
  </label>
</form>
```


#### JavaScript

Et voici le fragment de code JavaScript qui s'occupe de la logique principale. On commence par enregistrer un gestionnaire d'évènement pour `keypress` :


```js
let monChampTexte = document.getElementById("mon-champ-texte");
monChampTexte.addEventListener("keypress", bloqueSaisie, false);
```


La fonction `bloqueSaisie()` empêche toute saisie au clavier :


```js
function bloqueSaisie(evt) {
  evt.preventDefault();
  console.log("Une saisie a été empêchée.");
}
```


#### Résultat

Notes
-----

Invoquer `preventDefault()` à n'importe quel moment du cycle de vie d'un évènement annulera cet évènement. Cela signifie que toute action par défaut, normalement exécutée par le navigateur, n'aura pas lieu.

On peut utiliser la propriété `Event.cancelable` afin de vérifier si un évènement est annulable. Invoquer `preventDefault()` sur un évènement non-annulable n'aura aucun effet.

Spécifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-preventdefault③ |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
event.initEvent
===============

**Obsolète:** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

La méthode **`Event.initEvent()`** est utilisée pour initialiser la valeur d'un objet `event` créé à l'aide de `Document.createEvent()`.

Les évènements initialisés par ce moyen ont été créés par la méthode `Document.createEvent()`. Celle-ci doit être appelée à définir l'évènement avant qu'il ne soit distribué, en utilisant `EventTarget.dispatchEvent()`. Une fois l'évènement transmis, la méthode ne fait plus rien.

**Note :** Ne pas utiliser cette méthode qui est dépréciée.

À la place, utilisez un constructeur d'évènements spécifique comme `Event()` . La page Création et déclenchement d'évènements vous donne plus d'informations sur la manière de les utiliser.

Syntaxe
-------


```js
event.initEvent(type, bubbles, cancelable);
```


`type`

est une `DOMString` qui définit le type d'évènement.

`bubbles`

est un `Boolean` indiquant si l'évènement doit se propager vers le haut dans la chaîne des évènements ou non. Une fois déterminé, la propriété en lecture seule `Event.bubbles` donnera sa valeur.

`cancelable`

Une valeur booléenne définissant si l'évènement peut être annulé. Une fois déterminé, la propriété en lecture seule `Event.cancelable` donnera sa valeur.

Exemple
-------


```js
// Crée un évènement.
var event = document.createEvent("Event");

// Crée un évènement click qui doit se propager vers le haut
// et ne peut être annulé
event.initEvent("click", true, false);

// Écoute les évènements.
elem.addEventListener(
  "click",
  function (e) {
    // e.target matches elem
  },
  false,
);

elem.dispatchEvent(event);
```

Spécifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-initevent① |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Le constructeur à utiliser à la place de cette méthode dépréciée : `Event()`. Des constructeurs plus spécifiques peuvent aussi être utilisés.
Event.bubbles
=============

Indique si l'événement donné se propage à travers le DOM ou non.

**Note :** Voir Propagation et capture des évènements pour plus d'informations sur la propagation.

Syntaxe
-------


```js
event.bubbles;
```

### Valeur

Retourne un booléen dont la valeur est `true` (*vraie*) si l'événement se propage à travers le DOM.

Exemple
-------


```js
function goInput(e) {
  // vérifie la propagation et
  if (!e.bubbles) {
    // la lance si elle ne l'a pas été
    passItOn(e);
  }
  // déjà propagé
  doOutput(e);
}
```


**Note :** Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à `true`. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non.

Spécifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-bubbles③ |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* stopPropagation pour empêcher la propagation
Event.srcElement
================

**Non standard:** Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

**`Event.srcElement`** est un alias propriétaire (implémenté dans Internet Explorer) pour la propriété standard `Event.target` qui commence à être pris en charge dans d'autres navigateurs à des fins de compatibilité Web.

Spécification
-------------

Ne fait partie d'aucune spécification.

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `Window.event`
BatteryManager.charging
=======================

La propriété **`BatteryManager.charging`** est une valeur booléenne indiquant si la batterie de l'équipement est en train d'être chargée. Lorsque sa valeur change, l'évènement `chargingchange` (en-US) est déclenché.

Si la batterie est en charge, la variable a la valeur `true`. Sinon, dans le cas de la décharge, la variable vaut `false`.

Exemple
-------

### HTML


```html
<div id="charging">(état de charge inconnu)</div>
```

### JavaScript


```js
navigator.getBattery().then((battery) => {
  const charging = battery.charging;

  document.querySelector("#charging").textContent = charging;
});
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| Battery Status API # dom-batterymanager-charging |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `BatteryManager`
* `navigator.getBattery()`
BatteryManager.dischargingTime
==============================

La propriété **`BatteryManager.dischargingTime`** indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit déchargée, ou vaut `Infinity` (en-US) si la batterie est en train d'être chargée ou si le système ne parvient pas à calculer un temps restant. Lorsque sa valeur change, l'évènement `dischargingtimechange` (en-US) est déclenché.

**Note :** Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) pour des raisons de confidentialité.

Exemple
-------

### HTML


```html
<div id="dischargingTime">(temps de décharge inconnu)</div>
```

### JavaScript


```js
navigator.getBattery().then((battery) => {
  const time = battery.dischargingTime;

  document.querySelector("#dischargingTime").textContent =
    battery.dischargingTime;
});
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| Battery Status API # dom-batterymanager-dischargingtime |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `BatteryManager`
* `navigator.getBattery()`
BatteryManager.chargingTime
===========================

La propriété **`BatteryManager.chargingTime`** indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit rechargée, ou vaut `0` si la batterie est déjà rechargée. Si la batterie est en décharge, la variable vaut `Infinity` (en-US). Lorsque sa valeur change, l'évènement `chargingtimechange` (en-US) est déclenché.

**Note :** Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) pour des raisons de confidentialité.

Exemple
-------

### HTML


```html
<div id="chargingTime">(temps de charge inconnu)</div>
```

### JavaScript


```js
navigator.getBattery().then((battery) => {
  const time = battery.chargingTime;

  document.querySelector("#chargingTime").textContent = battery.chargingTime;
});
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| Battery Status API # dom-batterymanager-chargingtime |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `BatteryManager`
* `navigator.getBattery()`
BatteryManager.level
====================

La propriété **`BatteryManager.level`** indique le niveau de charge de la batterie en tant que valeur comprise entre `0.0` et `1.0`. Une valeur de `0.0` signifie que la batterie est vide et que le système est sur le point d'être désactivé. Une valeur de `1.0` signifie que la batterie est pleine. La valeur `1.0` est aussi retournée si le système n'est pas capable de déterminer son niveau de charge ou si le système n'est pas alimenté par une batterie. Lorsque sa valeur change, l'évènement `levelchange` (en-US) est déclenché.

Exemple
-------

### HTML


```html
<button id="get-level">Obtenir le niveau de la batterie</button>
<div id="output"></div>
```

### JavaScript


```js
const getLevel = document.querySelector("#get-level");
const output = document.querySelector("#output");

getLevel.addEventListener("click", async () => {
  if (!navigator.getBattery) {
    output.textContent = "Le gestionnaire de batterie n'est pas pris en charge";
  } else {
    const manager = await navigator.getBattery();
    const level = manager.level;
    output.textContent = `Niveau de batterie : ${level}`;
  }
});
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| Battery Status API # dom-batterymanager-level |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `BatteryManager`
* `navigator.getBattery()`
Option()
========

Le constructeur **`Option()`** permet de créer un nouvel objet `HTMLOptionElement`.

Syntaxe
-------


```js
var optionElementReference = new Option(text, value, defaultSelected, selected);
```

### Parameters

`text` Facultatif

Une chaîne de caractères `DOMString` représentant le contenu de l'élément, c'est-à-dire le texte affiché. Si cet argument n'est pas spécifié, c'est la chaîne vide qui sera utilisée.

`value` Facultatif

Une chaîne de caractères `DOMString` représentant la valeur de `HTMLOptionElement`, c'est-à-dire l'attribut HTML `value` de l'élément `<option>`. Si cet argument n'est pas fourni, ce sera la valeur de `text` qui sera reprise comme valeur (par exemple pour l'élément `<select>` associé lorsque le formulaire est envoyé au serveur).

`defaultSelected` Facultatif

Un `Boolean` (en-US) qui définit la valeur de l'attribut `selected`, c'est-à-dire que cette `<option>` sera la valeur par défaut sélectionné dans l'élément `<select>` lors du premier chargement de la page. S'il n'est pas spécifié, la valeur `false` sera utilisée par défaut.

`selected` Facultatif

Un `Boolean` (en-US) qui définit l'état sélectionné de l'option, la valeur par défaut est `false` (non sélectionné). Si cet argument est absent et même si l'argument `defaultSelected` vaut `true`, l'option ne sera pas pas sélectionnée.

Exemples
--------

### Ajouter de nouvelles options


```js
/\* Imaginons qu'on ait le code HTML suivant dans le document
<select id='s'>

</select>
\*/

var s = document.getElementById("s");
var options = [Quatre, Cinq, Six];

options.forEach(function (element, key) {
  s[key] = new Option(element, key);
});
```

### Ajouter des options avec différents paramètres


```js
/\* Imaginons qu'ont ait le code HTML suivant dans le document
<select id="s">
 <option>Premier</option>
 <option>Deuxième</option>
 <option>Troisième</option>
</select>
\*/

var s = document.getElementById("s");
var options = ["zéro", "un", "deux"];

options.forEach(function (element, key) {
  if (element == "zéro") {
    s[s.options.length] = new Option(element, s.options.length, false, false);
  }
  if (element == "un") {
    s[s.options.length] = new Option(element, s.options.length, true, false); // Ajouter l'attribut "selected"
  }
  if (element == "deux") {
    s[s.options.length] = new Option(element, s.options.length, false, true); // Sélectionnera l'option
  }
});

/\* Résultat dans le DOM / HTML modifié :
<select id="s">
 <option value="0">zéro</option>
 <option value="1" selected="">un</option>
 <option value="2">deux</option> // L'utilisateur verra cette option sélectionnée
</select>
\*/
```

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-option-dev |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
AnalyserNode.getFloatFrequencyData()
====================================

La méthode **`getFloatFrequencyData()`** de l'interface `AnalyserNode` copie les données de fréquence dans un tableau `Float32Array` (en-US) passé en paramètre.

Si le tableau a moins d'éléments que la propriété `AnalyserNode.frequencyBinCount`, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.

Syntaxe
-------


```js
var contexteAudio = new AudioContext();
var analyseur = contexteAudio.createAnalyser();

// La taille du tableau Float32Array doit correspondre à la valeur de la propriété frequencyBinCount
var tableauDonnees = new Float32Array(analyseur.frequencyBinCount);

// remplit le tableau Uint8Array avec les données renvoyées par la méthode getByteTimeDomainData()
analyseur.getByteTimeDomainData(tableauDonnees);
```

### Paramètres

`array`

`Float32Array` (en-US) dans lequel seront copiées les données de fréquence. Pour tout échantillon silencieux, la valeur est `-Infinity`.

### Valeur de retour

`undefined`.

Exemple
-------

L'exemple suivant montre comment créer simplement un `AnalyserNode` avec `AudioContext`, puis utiliser `requestAnimationFrame` et `<canvas>` pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic (et en particulier app.js lignes 128–205).


```js
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
var analyseur = contexteAudio.createAnalyser();

  ...

analyseur.fftSize = 256;
var tailleMemoireTampon = analyseur.frequencyBinCount;
console.log(tailleMemoireTampon);
var tableauDonnees = new Float32Array(tailleMemoireTampon);

contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR);

function dessiner() {
  dessin = requestAnimationFrame(dessiner);
  analyseur.getFloatFrequencyData(dataArray);
  contexteCanvas.fillStyle = 'rgb(0, 0, 0)';
  contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR);

  var largeurBarre = (LARGEUR / tailleMemoireTampon) \* 2.5;
  var hauteurBarre;
  var x = 0;

  for(var i = 0; i < tailleMemoireTampon; i++) {
    hauteurBarre = (tableauDonnees[i] + 140)\*2;
    contexteCanvas.fillStyle = 'rgb(' + Math.floor(hauteurBarre+100) + ',50,50)';
    contexteCanvas.fillRect(x, HEIGHT-hauteurBarre/2, largeurBarre, hauteurBarre/2);
    x += largeurBarre + 1;
  }
};

dessiner();
```

Paramètres
----------

array

Le tableau `Float32Array` (en-US) dans lequel seront copiées les données du domaine fréquentiel.

Spécifications
--------------

| Specification |
| --- |
| Web Audio API # dom-analysernode-getfloatfrequencydata |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser la Web Audio API (en-US)