事件的添加方式

事件的添加方式有四种：事件属性、元素对象、事件监听器、事件派发

1. 事件属性
   以属性的方式，直接添加事件给html对象
   <button onclick="alert('hello')">事件属性</button>
   上面代码中的onclick就是事件属性
2. 元素对象

<button class="btn">元素对象</button>
    <script>
      const btn2 = document.querySelector(".btn");
      btn2.onclick = () => console.log(111);
      btn2.onclick = (_) => console.log(222);
      btn2.onclick = ($) => console.log(333);
    </script>

以此种方式添加的事件，后面的会覆盖前面的，只会输出“333”。如果要删除事件，可以在javascript中添加代码：
btn2.onclick = null;

3.事件监听器
使用addEventListener()方法事件监听器，给元素添加事件。格式如下：
addEventListener(事件类型, 事件回调,默认冒泡false/true捕获)

<button class="btn-listener">事件监听器</button>
    <script>
      const btn3 = document.querySelector(".btn-listener");
      btn3.addEventListener("click", () => console.log(111));
      btn3.addEventListener("click", () => console.log(222));
      btn3.addEventListener("click", () => console.log(333));
</script>

代码中的3行输出都能执行。此种方式不能删除事件。如果以此种方式添加并能够删除事件，必须将事件回调定义成函数。

let show = () => console.log(444);
      btn3.addEventListener("click", show);
      // 删除
      btn3.removeEventListener("click", show);

1. 事件派发
   通过dispatchEvent(),通过一个对象，将事件排发个预算对象。

   
   <button class="btn-dispatch">事件派发</button>
   
    <script>
      // 事件派发
      let i = 0;
      const btn4 = document.querySelector(".btn-dispath");
      btn4.addEventListener("click", () => {
        console.log("i=" + i);
        i += 0.5;
      });
      const myclick = new Event("click");
      btn4.dispatchEvent(myclick);
      btn4.dispatchEvent(myclick);
   
      setInterval(() => btn4.dispatchEvent(myclick), 2000);
    </script>