Web Components--- 事件绑定

本章中的代码示例截取的是(Web Components ---模板（template）插槽（slot ）)中的代码

第一种 直接添加在标签中

这种方式的前提是，绑定的方法必须定义在自定义标签使用的页面

 <div class="right" onclick="handleClick()">
      <slot></slot>
 </div>

第二种 addEventListener

 const leftBtn = this.shadowRoot.querySelectorAll(".left")[0];
    leftBtn.addEventListener("click", () => {
      alert(222);
 });

或者定义在自定义标签使用的页面

const host = document.querySelectorAll('my-element')[0]
const leftBtn = host.shadowRoot.querySelectorAll('.left')[0]
leftBtn.addEventListener("click", () => {
     alert(1111);
});

第三种 事件捕获

这种方式是将事件绑定在自定义标签，利用事件捕获，获取事件的target，然后再执行方法

 this.addEventListener("click", function (event) {
     if (event.target.dataset.event === "add") {
           alert(4444)
          }
     });