EventTarget : mthode addEventListener()

Baseline Large disponibilit *

Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

* Certaines parties de cette fonctionnalit peuvent bnficier de prise en charge variables.

En savoir plus
Voir la compatibilit complte

Note : Cette fonctionnalit est disponible via les Web Workers.

La mthode addEventListener() de l'interface EventTarget permet de dfinir une fonction qui sera appele chaque fois que l'vnement dfini est envoy la cible.

Les cibles courantes sont Element, ses enfants, Document et Window, mais la cible peut tre tout objet prenant en charge les vnements (par exemple IDBRequest).

Note : La mthode addEventListener() est la manire recommande d'enregistrer un couteur d'vnements. Les avantages sont les suivants :

Elle permet d'ajouter plusieurs gestionnaires pour un vnement. Cela est particulirement utile pour les bibliothques, les modules JavaScript ou tout autre type de code qui doit bien fonctionner avec d'autres bibliothques ou extensions.
Contrairement l'utilisation d'une proprit onXYZ, elle offre un contrle plus prcis de la phase lors de laquelle l'couteur est activ (capture vs. propagation).
Elle fonctionne sur n'importe quelle cible d'vnement, pas seulement les lments HTML ou SVG.

La mthode addEventListener() fonctionne en ajoutant une fonction, ou un objet qui implmente une fonction handleEvent(), la liste des couteurs d'vnements pour le type d'vnement dfini sur le EventTarget sur lequel elle est appele. Si la fonction ou l'objet est dj dans la liste des couteurs pour cette cible, la fonction ou l'objet n'est pas ajoute une seconde fois.

Note : Si une fonction anonyme particulire figure dj dans la liste des couteurs d'vnements enregistrs pour une cible donne, et qu'une fonction anonyme identique est ensuite transmise addEventListener, la seconde fonction sera aussi ajoute la liste des couteurs pour cette cible.

En effet, deux fonctions anonymes ne sont jamais identiques, mme si elles sont dfinies partir du mme code source inchang, y compris dans une boucle.

Redfinir plusieurs fois la mme fonction anonyme dans ce genre de cas peut poser problme. (Voir Problmes de mmoire ci-dessous.)

Si un couteur d'vnement est ajout un EventTarget depuis un autre couteur c'est--dire pendant le traitement de l'vnement l'vnement en cours ne dclenchera pas le nouvel couteur. Cependant, ce nouvel couteur pourra tre dclench lors d'une phase ultrieure du cycle de l'vnement, par exemple lors de la phase de propagation (bubbling).

Syntaxe

addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)

Paramtres

type

Une chane de caractres sensible la casse reprsentant le type d'vnement couter.

listener

Un objet qui reoit la notification (un objet qui implmente l'interface Event) lorsqu'un vnement du type dfini se produit. Cela peut tre null, un objet avec une mthode handleEvent() ou une fonction JavaScript. Voir La fonction de rappel de l'couteur d'vnements pour plus de dtails.

options Facultatif

Objet qui dfinit les caractristiques de l'couteur d'vnement. Les options disponibles sont :

capture Facultatif

Un boolen indiquant que les vnements de ce type seront transmis l'couteur enregistr avant d'tre transmis tout autre EventTarget situ en dessous dans l'arbre DOM. Par dfaut, false si non dfini.

once Facultatif

Un boolen indiquant que l'couteur ne doit tre invoqu qu'une seule fois aprs avoir t ajout. Si true, l'couteur sera automatiquement supprim aprs son invocation. Par dfaut, false si non dfini.

passive Facultatif

Un boolen qui, si true, indique que la fonction dfinie par listener n'appellera jamais preventDefault(). Si un couteur passif appelle preventDefault(), rien ne se passe et un avertissement peut apparatre dans la console.

Si cette option n'est pas dfinie, elle vaut false sauf dans les navigateurs autres que Safari, o elle vaut true pour les vnements wheel, mousewheel, touchstart et touchmove. Voir Utiliser les couteurs passifs pour en savoir plus.

signal Facultatif

Un objet AbortSignal. L'couteur sera supprim lorsque la mthode abort() du AbortController propritaire du signal sera appele. Si non dfini, aucun AbortSignal n'est associ l'couteur.

useCapture Facultatif

Un boolen indiquant si les vnements de ce type seront transmis l'couteur avant d'tre transmis tout autre EventTarget situ en dessous dans l'arbre DOM. Les vnements qui remontent (propagation) dans l'arbre ne dclencheront pas un couteur dfini en mode capture. La propagation et la capture sont deux modes de propagation des vnements dans des lments imbriqus ayant chacun un gestionnaire pour cet vnement. Le mode de propagation dtermine l'ordre dans lequel les lments reoivent l'vnement. Voir la spcification DOM (angl.) et l'ordre des vnements JavaScript (angl.) pour plus d'explications. Par dfaut, useCapture vaut false si non dfini.

Note : Pour les couteurs attachs directement la cible de l'vnement, l'vnement est dans la phase cible, et non dans les phases de capture ou de propagation. Les couteurs en phase capture sont appels avant ceux en phase cible ou de propagation.

wantsUntrusted Facultatif

Paramtre spcifique Firefox (Gecko). Si true, l'couteur reoit les vnements synthtiques envoys par le contenu web (par dfaut false pour le chrome du navigateur et true pour les pages web classiques). Ce paramtre est utile pour le code des modules complmentaires et du navigateur lui-mme.

Valeur de retour

Aucune (undefined).

Notes d'utilisation

La fonction de rappel de l'couteur d'vnements

L'couteur d'vnement peut tre dfini soit comme une fonction de rappel, soit comme un objet dont la mthode handleEvent() sert de fonction de rappel.

La fonction de rappel elle-mme accepte les mmes paramtres et retourne la mme chose que la mthode handleEvent() : elle prend en paramtre un objet bas sur Event dcrivant l'vnement survenu, et ne retourne rien.

Par exemple, une fonction de rappel pouvant servir la fois pour fullscreenchange et fullscreenerror pourrait ressembler :

function handleEvent(event) {
  if (event.type === "fullscreenchange") {
    // grer le passage en plein cran
  } else {
    // grer l'erreur de passage en plein cran
  }
}

Par exemple, lorsque vous utilisez un gestionnaire gnrique pour un ensemble d'lments similaires, la valeur de this l'intrieur du gestionnaire sera une rfrence l'lment. Elle sera identique la valeur de la proprit currentTarget de l'objet vnement pass au gestionnaire.

La valeur de `this` dans le gestionnaire

Il est souvent utile de faire rfrence l'lment sur lequel le gestionnaire d'vnement a t dclench, par exemple lorsqu'on utilise un gestionnaire gnrique pour un ensemble d'lments similaires.

Lorsque vous attachez une fonction de gestion un lment avec addEventListener(), la valeur de this l'intrieur du gestionnaire sera une rfrence l'lment. Elle sera identique la valeur de la proprit currentTarget de l'objet pass au gestionnaire d'vnement.

monElement.addEventListener("click", function (e) {
  console.log(this.className); // affiche la classe de monElement
  console.log(e.currentTarget === this); // affiche `true`
});

Rappel : les fonctions flches n'ont pas leur propre contexte this.

monElement.addEventListener("click", (e) => {
  console.log(this.className); // ATTENTION : `this` n'est pas `monElement`
  console.log(e.currentTarget === this); // affiche `false`
});

Si un gestionnaire d'vnement (par exemple onclick) est dfini sur un lment dans le code HTML, le code JavaScript de l'attribut est en ralit encapsul dans une fonction de gestion qui lie la valeur de this de la mme faon que addEventListener() : une occurrence de this dans ce code fait rfrence l'lment.

html

<table id="mon-tableau" >
  <!-- `this` fait rfrence au tableau ; affiche 'mon-tableau' -->
  
</table>

Notez que la valeur de this l'intrieur d'une fonction appele par le code de l'attribut suit les rgles standards. Exemple :

html

<script>
  function logID() {
    console.log(this.id);
  }
</script>
<table id="mon-tableau" >
  <!-- lors de l'appel, `this` fera rfrence  l'objet global -->
  
</table>

La valeur de this dans logID() est une rfrence l'objet global Window (ou undefined en mode strict).

Dfinir `this` avec `bind()`

La mthode Function.prototype.bind() permet de dfinir un contexte this fixe pour tous les appels ultrieurs ce qui permet d'viter les problmes lis l'ambigut du contexte this selon la faon dont la fonction est appele. Notez cependant, qu'il faut conserver une rfrence l'couteur pour pouvoir le supprimer par la suite.

Voici un exemple avec et sans bind() :

class Something {
  name = "Quelque-chose de bien";
  constructor(element) {
    // attacher `bind` cause un contexte `this` fixe  tre assign  `onclick2`
    this.onclick2 = this.onclick2.bind(this);
    element.addEventListener("click", this.onclick1);
    element.addEventListener("click", this.onclick2); // Trick
  }
  onclick1(event) {
    console.log(this.name); // donne undefined, car `this` est l'lment
  }
  onclick2(event) {
    console.log(this.name); // 'Quelque-chose de bien', car `this` est li  l'instance de Something
  }
}

const s = new Something(document.body);

Une autre solution consiste utiliser une fonction spciale nomme handleEvent() pour intercepter tous les vnements :

class Something {
  name = "Quelque-chose de bien";
  constructor(element) {
    // Notez que les couteurs dans ce cas sont `this`, pas this.handleEvent
    element.addEventListener("click", this);
    element.addEventListener("dblclick", this);
  }
  handleEvent(event) {
    console.log(this.name); // 'Quelque-chose de bien', car `this` est li  l'objet nouvellement cr
    switch (event.type) {
      case "click":
        // du code
        break;
      case "dblclick":
        // du code
        break;
    }
  }
}

const s = new Something(document.body);

Une autre faon de grer la rfrence this est d'utiliser une fonction flche, qui n'a pas de contexte this propre.

class SomeClass {
  name = "Quelque-chose de bien";

  register() {
    window.addEventListener("keydown", (e) => {
      this.someMethod(e);
    });
  }

  someMethod(e) {
    console.log(this.name);
    switch (e.code) {
      case "ArrowUp":
        // du code
        break;
      case "ArrowDown":
        // du code
        break;
    }
  }
}

const myObject = new SomeClass();
myObject.register();

Faire circuler des donnes dans un couteur d'vnement

Les couteurs d'vnements n'acceptent qu'un seul argument : un objet Event ou une sous-classe de Event, qui est automatiquement transmis l'couteur. La valeur de retour est ignore. Ainsi, pour transmettre des donnes un couteur ou en rcuprer, il faut utiliser des fermetures (closures en anglais) plutt que de passer des paramtres ou de s'appuyer sur la valeur de retour.

Les fonctions passes comme couteurs d'vnements ont accs toutes les variables dclares dans les portes englobantes.

const monBouton = document.getElementById("my-button-id");
let uneChaine = "Donne";

monBouton.addEventListener("click", () => {
  console.log(uneChaine);
  //  Donne  au premier clic,
  //  Donne modifie  au second clic

  uneChaine = "Donne modifie";
});

console.log(uneChaine); // Valeur attendue :  Donne  (n'affichera jamais  Donne modifie )

Voir le guide sur les fonctions pour plus d'informations sur la porte des fonctions.

Problmes de mmoire

const elems = document.getElementsByTagName("*");

// Cas 1
for (const elem of elems) {
  elem.addEventListener("click", (e) => {
    // Fait quelque chose
  });
}

// Cas 2
function traiterEvenement(e) {
  // Fait quelque chose
}

for (const elem of elems) {
  elem.addEventListener("click", traiterEvenement);
}

Dans le premier cas ci-dessus, une nouvelle fonction de gestion (anonyme) est cre chaque itration de la boucle. Dans le second cas, la mme fonction dclare prcdemment est utilise comme gestionnaire d'vnement, ce qui rduit la consommation mmoire car une seule fonction gestionnaire est cre. De plus, dans le premier cas, il n'est pas possible d'appeler removeEventListener() car aucune rfrence la fonction anonyme n'est conserve (ou ici, aucune rfrence l'une des multiples fonctions anonymes cres par la boucle). Dans le second cas, il est possible d'utiliser myElement.removeEventListener("click", traiterEvenement, false) car traiterEvenement est la rfrence de la fonction.

En ralit, concernant la consommation mmoire, le problme n'est pas tant l'absence de rfrence la fonction, mais plutt l'absence de rfrence statique la fonction.

Utiliser les couteurs passifs

Si un vnement possde une action par dfaut par exemple, un vnement wheel qui fait dfiler le conteneur le navigateur ne peut gnralement pas lancer l'action par dfaut tant que l'couteur d'vnement n'a pas termin, car il ne sait pas l'avance si l'couteur va annuler l'action par dfaut avec Event.preventDefault(). Si l'couteur prend trop de temps s'excuter, cela peut provoquer un dlai perceptible (appel jank) avant que l'action par dfaut ne soit excute.

En dfinissant l'option passive true, un couteur d'vnement dclare qu'il n'annulera pas l'action par dfaut, ce qui permet au navigateur de lancer immdiatement l'action par dfaut sans attendre la fin de l'couteur. Si l'couteur appelle malgr tout Event.preventDefault(), cela n'aura aucun effet.

La spcification de addEventListener() dfinit la valeur par dfaut de l'option passive false. Cependant, pour amliorer les performances de dfilement dans du code existant, les navigateurs modernes ont chang la valeur par dfaut de l'option passive true pour les vnements wheel, mousewheel, touchstart et touchmove sur les nuds de niveau document comme Window, Document et Document.body. Cela empche l'couteur d'vnement d'annuler l'vnement, et donc de bloquer l'affichage de la page pendant le dfilement.

Ainsi, si vous souhaitez annuler ce comportement et garantir que l'option passive est false, vous devez explicitement dfinir cette option false (plutt que de compter sur la valeur par dfaut).

Il n'est pas ncessaire de se soucier de la valeur de passive pour l'vnement scroll de base. Comme il ne peut pas tre annul, les couteurs d'vnements ne peuvent pas bloquer l'affichage de la page dans ce cas.

Voir Amliorer les performances de dfilement avec les couteurs passifs pour un exemple illustrant l'effet des couteurs passifs.

Exemples

Ajouter un couteur simple

Cet exemple montre comment utiliser addEventListener() pour surveiller les clics de souris sur un lment.

HTML

html

<table id="outside">
  <tbody>
    <tr>
      <td id="t1">un</td>
    </tr>
    <tr>
      <td id="t2">deux</td>
    </tr>
  </tbody>
</table>

JavaScript

// Fonction pour changer le contenu de t2
function modifyText() {
  const t2 = document.getElementById("t2");
  const isNodeTrois = t2.firstChild.nodeValue === "trois";
  t2.firstChild.nodeValue = isNodeTrois ? "deux" : "trois";
}

// Ajouter un couteur d'vnements au tableau
const el = document.getElementById("outside");
el.addEventListener("click", modifyText);

Dans ce code, modifyText() est un couteur pour les vnements click enregistr avec addEventListener(). Un clic n'importe o dans le tableau remonte jusqu'au gestionnaire et excute modifyText().

Rsultat

Ajouter un couteur annulable

Cet exemple montre comment ajouter un addEventListener() qui peut tre annul avec un AbortSignal.

HTML

html

<table id="outside">
  <tbody>
    <tr>
      <td id="t1">un</td>
    </tr>
    <tr>
      <td id="t2">deux</td>
    </tr>
  </tbody>
</table>

JavaScript

// Ajouter un couteur d'vnements annulable au tableau
const controller = new AbortController();
const el = document.getElementById("outside");
el.addEventListener("click", modifyText, { signal: controller.signal });

// Fonction pour changer le contenu de t2
function modifyText() {
  const t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue === "trois") {
    t2.firstChild.nodeValue = "deux";
  } else {
    t2.firstChild.nodeValue = "trois";
    controller.abort(); // supprimer l'couteur aprs que la valeur atteigne "trois"
  }
}

Dans l'exemple ci-dessus, on modifie le code de l'exemple prcdent de sorte qu'aprs que le contenu de la deuxime ligne passe trois , on appelle abort() depuis le AbortController pass addEventListener(). Ainsi, la valeur reste trois indfiniment car il n'y a plus de code l'coute de l'vnement click.

Rsultat

couteur d'vnement avec fonction anonyme

Ici, nous allons voir comment utiliser une fonction anonyme pour transmettre des paramtres l'couteur d'vnement.

HTML

html

<table id="outside">
  <tbody>
    <tr>
      <td id="t1">un</td>
    </tr>
    <tr>
      <td id="t2">deux</td>
    </tr>
  </tbody>
</table>

JavaScript

// Fonction pour changer le contenu de t2
function modifyText(newText) {
  const t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = newText;
}

// Fonction pour ajouter un couteur d'vnements au tableau
const el = document.getElementById("outside");
el.addEventListener("click", function () {
  modifyText("quatre");
});

Remarquez que l'couteur est une fonction anonyme qui encapsule du code permettant ensuite de transmettre des paramtres la fonction modifyText(), responsable de la gestion de l'vnement.

Rsultat

couteur d'vnement avec fonction flche

Cet exemple montre un couteur d'vnement implment avec la notation fonction flche.

HTML

html

<table id="outside">
  <tbody>
    <tr>
      <td id="t1">un</td>
    </tr>
    <tr>
      <td id="t2">deux</td>
    </tr>
  </tbody>
</table>

JavaScript

// Fonction pour changer le contenu de t2
function modifyText(newText) {
  const t2 = document.getElementById("t2");
  t2.firstChild.nodeValue = newText;
}

// Ajouter un couteur d'vnements au tableau avec une fonction flche
const el = document.getElementById("outside");
el.addEventListener("click", () => {
  modifyText("quatre");
});

Rsultat

Notez que bien que les fonctions anonymes et les fonctions flches soient similaires, elles n'ont pas le mme comportement pour this. Les fonctions anonymes (et toutes les fonctions traditionnelles JavaScript) crent leur propre liaison this, tandis que les fonctions flches hritent du this de la fonction englobante.

Cela signifie que les variables et constantes disponibles dans la fonction englobante sont aussi accessibles l'couteur d'vnement lorsqu'on utilise une fonction flche.

Exemple d'utilisation des options

HTML

html

<div class="outer">
  outer, une fois & aucune fois
  <div class="middle" target="_blank">
    middle, capture & aucune capture
    <a class="inner1" href="https://www.mozilla.org" target="_blank">
      inner1, passif & preventDefault(n'est pas autoris)
    </a>
    <a class="inner2" href="https://developer.mozilla.org/" target="_blank">
      inner2, pas passif & preventDefault(n'ouvre pas de nouvelle page)
    </a>
  </div>
</div>
<hr />
<button class="clear-button">Effacer les journaux</button>
<section class="demo-logs"></section>

CSS

css

.outer,
.middle,
.inner1,
.inner2 {
  display: block;
  width: 520px;
  padding: 15px;
  margin: 15px;
  text-decoration: none;
}
.outer {
  border: 1px solid red;
  color: red;
}
.middle {
  border: 1px solid green;
  color: green;
  width: 460px;
}
.inner1,
.inner2 {
  border: 1px solid purple;
  color: purple;
  width: 400px;
}

.demo-logs {
  width: 530px;
  height: 16rem;
  background-color: #dddddd;
  overflow-x: auto;
  padding: 1rem;
}

JavaScript

const clearBtn = document.querySelector(".clear-button");
const demoLogs = document.querySelector(".demo-logs");

function log(msg) {
  demoLogs.innerText += `${msg}\n`;
}

clearBtn.addEventListener("click", () => {
  demoLogs.innerText = "";
});

const outer = document.querySelector(".outer");
const middle = document.querySelector(".middle");
const inner1 = document.querySelector(".inner1");
const inner2 = document.querySelector(".inner2");

const capture = {
  capture: true,
};
const noneCapture = {
  capture: false,
};
const once = {
  once: true,
};
const noneOnce = {
  once: false,
};
const passive = {
  passive: true,
};
const nonePassive = {
  passive: false,
};

outer.addEventListener("click", onceHandler, once);
outer.addEventListener("click", noneOnceHandler, noneOnce);
middle.addEventListener("click", captureHandler, capture);
middle.addEventListener("click", noneCaptureHandler, noneCapture);
inner1.addEventListener("click", passiveHandler, passive);
inner2.addEventListener("click", nonePassiveHandler, nonePassive);

function onceHandler(event) {
  log("outer, un fois");
}
function noneOnceHandler(event) {
  log("outer, aucune fois, par dfaut\n");
}
function captureHandler(event) {
  // event.stopImmediatePropagation();
  log("middle, capture");
}
function noneCaptureHandler(event) {
  log("middle, aucune capture, par dfaut");
}
function passiveHandler(event) {
  // Unable to preventDefault inside passive event listener invocation.
  event.preventDefault();
  log("inner1, passif, ouvre un nouvelle page");
}
function nonePassiveHandler(event) {
  event.preventDefault();
  // event.stopPropagation();
  log("inner2, pas passif, par dfaut, n'ouvre pas de nouvelle page");
}

Rsultat

Click the outer, middle, inner containers respectively to see how the options work.

couteur d'vnement avec plusieurs options

Vous pouvez dfinir plusieurs options dans le paramtre options. Dans l'exemple suivant, nous en dfinissons deux :

passive, pour indiquer que le gestionnaire n'appellera pas preventDefault()
once, pour s'assurer que le gestionnaire d'vnement ne sera appel qu'une seule fois.

HTML

html

<button id="bouton-exemple">Vous n'avez pas cliqu sur ce bouton.</button>
<button id="bouton-reinitialisation">
  Cliquez sur ce bouton pour rinitialiser le premier bouton.
</button>

JavaScript

const buttonToBeClicked = document.getElementById("bouton-exemple");

const resetButton = document.getElementById("bouton-reinitialisation");

// le texte avec lequel le bouton est initialis
const initialText = buttonToBeClicked.textContent;

// le texte que le bouton contient aprs avoir t cliqu
const clickedText = "Vous avez cliqu sur ce bouton.";

// nous levons la fonction de rappel de l'couteur d'vnements
// pour viter d'avoir des couteurs en double attachs
function eventListener() {
  buttonToBeClicked.textContent = clickedText;
}

function addListener() {
  buttonToBeClicked.addEventListener("click", eventListener, {
    passive: true,
    once: true,
  });
}

// lorsque le bouton de rinitialisation est cliqu, le bouton d'exemple
// est rinitialis, et autoris  avoir son tat mis  jour  nouveau
resetButton.addEventListener("click", () => {
  buttonToBeClicked.textContent = initialText;
  addListener();
});

addListener();

Rsultat

Amliorer les performances de dfilement avec les couteurs passifs

L'exemple suivant montre l'effet de l'option passive. Il inclut un <div> contenant du texte et une case cocher.

HTML

html

<div id="container">
  <p>
    Mais l-bas, il ferait sombre maintenant, et ce ne serait pas le joli
    aquarium clair qu'elle s'imaginait pendant les heures de jour,
    tourbillonnant avec des bancs de minuscules animaux dlicats flottant et
    dansant lentement  leurs propres courants sereins et crant l'apparence
    d'une peinture vivante. C'tait faux, de toute faon. L'ocan tait
    diffrent d'un aquarium, qui tait un environnement artificiel. L'ocan
    tait un monde. Et un monde n'est pas de l'art. Dorothy pensa aux tres
    vivants qui se dplaaient dans ce monde&nbsp;: grands, impitoyables et
    affams. Comme nous ici-haut.
  </p>
</div>

<div>
  <input type="checkbox" id="passive" name="passive" checked />
  <label for="passive">passif</label>
</div>

#container {
  width: 150px;
  height: 200px;
  overflow: scroll;
  margin: 2rem 0;
  padding: 0.4rem;
  border: 1px solid black;
}

JavaScript

Ce code ajoute un couteur l'vnement wheel du conteneur, qui fait dfiler ce dernier par dfaut. L'couteur excute une opration longue. Au dpart, l'couteur est ajout avec l'option passive, et chaque fois que la case cocher est modifie, le code bascule la valeur de l'option passive.

const passive = document.querySelector("#passive");
const container = document.querySelector("#container");

passive.addEventListener("change", (event) => {
  container.removeEventListener("wheel", wheelHandler);
  container.addEventListener("wheel", wheelHandler, {
    passive: passive.checked,
    once: true,
  });
});

container.addEventListener("wheel", wheelHandler, {
  passive: true,
  once: true,
});

function wheelHandler() {
  function isPrime(n) {
    for (let c = 2; c <= Math.sqrt(n); ++c) {
      if (n % c === 0) {
        return false;
      }
    }
    return true;
  }

  const quota = 1000000;
  const primes = [];
  const maximum = 1000000;

  while (primes.length < quota) {
    const candidate = Math.floor(Math.random() * (maximum + 1));
    if (isPrime(candidate)) {
      primes.push(candidate);
    }
  }

  console.log(primes);
}

Rsultat

L'effet est le suivant :

Au dpart, l'couteur est passif, donc le dfilement du conteneur la molette est immdiat.
Si vous dcochez passive et essayez de faire dfiler le conteneur avec la molette, il y a un dlai notable avant le dfilement, car le navigateur doit attendre la fin de l'couteur long s'excuter.