事件的添加方式

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

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

<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);

事件派发
通过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>

更多相关文章

随机推荐