addEventListener

忧心忡忡，漫无目的

直译：添加事件监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="add_event_button">监听事件</button>
    <p id="add_event_p"></p>
    <script>
     const ster =  "76文书.心里有火、眼里有光"
     const eventButton = document.getElementById("add_event_button");
     eventButton.ster = "76文书.心里有火、眼里有光很好"
  
    // eventButton.addEventListener("click",addInnerText.bind(null,eventButton,ster),false);
      eventButton.addEventListener("click",addInnerText,false);
        //  function addInnerText(eventButton,ster){
         function addInnerText(event){
             //event：（https://developer.mozilla.org/zh-CN/docs/Web/API/Event）暗指内容很多有需要的自己看下，后期有可能，写一篇文章
             console.log(event);
             debugger
        // document.getElementById("add_event_p").innerText += ster;
          document.getElementById("add_event_p").innerText += event.target.ster;
          //event.target:是button#add_event_button相当于上文的eventButton
          
         }
    </script>
</body>
</html>

上边的例子就展现了一个很简单的事件监听（点击按钮触发对应回调函数，回调函数的传值过程新发现的重点，文字添加替换）。

语法

target.addEventListener(type, listener, options); target.addEventListener(type, listener, useCapture); target.addEventListener(type, listener, useCapture, wantsUntrusted ); // Gecko/Mozilla only

target:element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
type:表示监听事件类型的字符串events链接
- click 点击事件
- mouseenter 鼠标划入
- mouseout 鼠标移出
- keydown 点击键盘任意键
- keyup 释放键盘任意键
用于视频组件的埋码监听事件
- pause video 视频已暂停
- play video 视频已开始
- ended video 视频已停止，到达视频的末尾
listener:当所监听的事件类型触发时，会接收到一个事件通知对象。listener 必须是一个实现了 EventListener[^EventListener](注解：比较偏僻的知识) 接口的对象，或者是一个函数（如上面例子所示的callback）（回调函数传值看代码，两中传值方式1.原有event，2.bind传值）。

[^EventListener]'{handleEvent: function (event) { alert('Element clicked through handleEvent property!'); }}'

useCapture：可选，布尔值，指定事件是否在捕获或者冒泡阶段执行，true--在捕获阶段执行，false(默认)----在冒泡阶段执行。（这就于事件流有关联了，事件捕获阶段->事件执行阶段->事件冒泡阶段）
options 一个指定有关 listener 属性的可选参数对象。可用的选项如下：
- capture: Boolean，表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
- once: Boolean，表示 listener 在添加之后最多只调用一次。如果是 true， listener 会在其被调用之后自动移除。
- passive: Boolean，设置为true时，表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。查看使用 passive 改善的滚屏性能了解更多.
- signal：AbortSignal，该 AbortSignal 的 abort() 方法被调用时，监听器会被移除。
- mozSystemGroup: 只能在 XBL 或者是 Firefox' chrome 使用，这是个 Boolean，表示 listener 被添加到 system group。