js addEventListener バインディングイベントメソッド（詳細紹介）

addEventListenerは、クリックイベントのバインドなど、イベントを要素にバインドするメソッドであり、クリックされた後に要素が何らかの操作を実行するようにします。

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

addEventListener には 3 つのパラメータがあります。
1. type は、
監視するイベントのタイプの文字列を示します。たとえば、クリックイベントを要素にバインドする場合は、タイプを「クリック」に設定します。
2. リスナー
コールバック関数は、イベントがトリガーされた後に実行されるアクションを示します。
3. options
3 番目のパラメータ options は Optional パラメータで、ブール値を渡すか、オブジェクトを渡すことができます (Ali のインタビューで、addEventListener の 3 番目のパラメータにオブジェクトを渡すことができるかどうか尋ねられましたが、渡せませんでした)その時に答えてください）

ブール値が渡される場合、false はイベントがバブリングフェーズでトリガーされることを意味し (デフォルト)、true はイベントがキャプチャフェーズでトリガーされることを意味し、これらの値はオブジェクトを渡すときに設定できます
。

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

パラメータが多すぎて少し複雑に見えますが、複雑ではなく、最初の 3 つのパラメータの意味は、何度か読むと理解できます。

具体的には、イベントを削除するために4 番目のパラメーター signalが使用されます。これは、AbortSignal オブジェクトです (文字通り、放棄されたシグナルを理解します)。AbortSignal オブジェクトのコントローラー AbortController (放棄されたコントローラーを文字通り理解する) が中止シグナルを送信する (abort() メソッドが呼び出される) と、バインディングイベントは削除されます。
わかりませんでしたか？
例を挙げましょう。
たとえば、このような効果を得るには、5 秒前に要素をクリックしてクリックイベントをトリガーし、5 秒後に要素をクリックしてクリックイベントをトリガーしないようにします。次のようなコードを記述できます。

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)

このことから、AbortController オブジェクトが中止メソッド abort() を呼び出して、AbortSignal オブジェクトを中止シグナルに変えることができ、この時点で AbortSignal の中止属性が true になることがわかります。

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

js addEventListener バインディングイベントメソッド（詳細紹介）

おすすめ