js addEventListener méthode d'événement de liaison (introduction détaillée)

addEventListener est une méthode de liaison d'événements à des éléments
, tels que la liaison d'événements de clic, afin que les éléments effectuent certaines opérations après avoir été cliqués

let element = document.getElementById("element");
element.addEventListener(
  "click",
  function(e) {
    
    
    console.log("点击了");
  }
);

addEventListener a trois paramètres
1. type
indique la chaîne du type d'événement à surveiller. Par exemple, si vous souhaitez lier un événement click à un élément, définissez le type sur "click"
2. La
fonction de rappel de l'écouteur indique l'action à effectuer après le déclenchement de l'événement, par exemple, la sortie "clicked" après avoir cliqué
3. options
Le troisième paramètre options est un paramètre optionnel, vous pouvez passer un booléen, ou vous pouvez passer un objet (lors de l'interview avec Ali, on m'a demandé si le troisième paramètre de addEventListener pouvait passer un objet, mais je ne l'ai pas fait y répondre à l'heure)

Lorsqu'un booléen est passé, false signifie que l'événement est déclenché dans la phase de bouillonnement (par défaut), true signifie que l'événement est déclenché dans la phase de capture, et ces valeurs
peuvent être définies lors du passage dans un objet

{
    
    
	capture:  Boolean，false表示事件在冒泡阶段触发（默认），true表示事件在捕获阶段触发
	once:  Boolean，true表示事件在触发一次后移除，默认是false
	passive: Boolean，设置为true时，表示 listener 永远不会调用 preventDefault()。
	如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。
	signal：AbortSignal，该 AbortSignal 的 abort() 方法被调用时，监听器会被移除。
}

Il semble qu'il y ait trop de paramètres et cela semble un peu compliqué, mais ce n'est pas compliqué.Vous pouvez comprendre la signification des trois premiers paramètres après l'avoir lu plusieurs fois.

Plus précisément, le quatrième paramètre signal
est utilisé pour supprimer l'événement. Il s'agit d'un objet AbortSignal (comprend littéralement le signal abandonné). Lorsque le contrôleur AbortController de l'objet AbortSignal (comprend littéralement le contrôleur abandonné) envoie un signal d'abandon (la méthode abort() est appelée), l'événement de liaison est supprimé.
Vous n'avez pas compris ?
Donnons un exemple.
Par exemple, pour obtenir un tel effet, cliquez sur un élément avant 5 s pour déclencher un événement de clic, et cliquez sur l'élément après 5 s pour ne plus déclencher d'événement de clic. Vous pouvez écrire un code comme celui-ci :

let controller = new AbortController();
let signal= controller.signal;

let element = document.getElementById("element");
element.addEventListener(
  "click",
  function (e) {
    
    
    console.log("点击了");
  },
  {
    
    
    signal: signal,
  }
);

//设置5秒后发出废弃信号
setTimeout(function(){
    
    
  controller.abort()
}, 5000)

À partir de là, nous pouvons voir que l'objet AbortController peut appeler la méthode abort abort() pour transformer l'objet AbortSignal en un signal abandonné, et l'attribut abandonné de AbortSignal deviendra vrai à ce moment.

Pour MDN : https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener