options 配置对象，其可配置项如下
- capture：一个布尔值，表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
- once：一个布尔值，表示 listener 在添加之后最多只调用一次。如果为 true，listener 会在其被调用之后自动移除。可用于只触发一次就移除的事件，可以自动释放listener资源
- passive：一个布尔值，设置为 true 时，表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。
- signal 可选 参数为 AbortSignal
AbortSignal，该 AbortSignal 的 abort() 方法被调用时，监听器会被移除。可以自动释放listener资源
- Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<div id="div">
<h1 id="h1">我的第一个HTML页面</h1>
<p>我的第一个段落。</p>
</div>
</body>
<script>
const controller = new AbortController();
const signal = controller.signal;
// 为 h1 添加点击事件
document.getElementById("h1").addEventListener('click', function(e){
e.preventDefault()
console.log("这是div内 h1 的事件")
}, { // 这里是option 选项
capture: false, // 表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发， 这个不知道什么用处，可能我没有碰到相关的情况
once: true, // 只会被调用一次
passive: true, // 设置为 true 时，表示 listener 永远不会调用 preventDefault() // 警告内容 Unable to preventDefault inside passive event listener invocation.
signal: signal // 该 signal 的 abort() 方法被调用时，监听器会被移除， 这个好像也是真的
})
// 为外层div添加点击事件
document.getElementById("div").addEventListener('click', function(e){
console.log("这是外层 div 的事件")
}, true)
setTimeout(() => {
controller.abort();
}, 5000);
</script>
</html>
