事件绑定

一、tag 绑定

---

1.1 语法

<div class="box" onclick="handleClick()"></div>
<script>
  function handleClick(e){
    console.log(e); // 输出 undefined
    console.log(this); // this 指向 window
  }
</script>

1.2 特点

行内事件处理器 是一种不友好的做法

1. 混用HTML与JavaScript,增加了文档的解析难度

2. 行内事件处理器 很难维护

二、on+event 绑定

---

1.1 语法

  <div class="box"></div>
  <script>
    const box = document.querySelector('.box');
    box.onclick = function(e){
      console.log(e);
      console.log(this); // 指向 box 元素
    }
  </script>

1.2 特点

on+event 事件绑定方式, 总是在在事件冒泡阶段执行, 同一个监听器不可以注册多个处理器,下一个会覆盖上一个

三、addEventListener 绑定

---

3.1 语法

<div class="box"></div>
<script>
  const box = document.querySelector('.box');
  box.addEventListener('click',function(e){
    console.log(e);
    console.log(this);  // 指向 box 元素
  });
  box.addEventListener('click',function(e){
    console.log(e);
    console.log(this);  // 指向 box 元素
  });
  box.addEventListener('click',function(e){
    console.log(e);
    console.log(this);  // 指向 box 元素
  });

3.2 特点

addEventListener 提供了更多的灵活性和控制能力，允许指定在事件的哪个阶段（捕获或冒泡）执行监听器，以及为同一个事件添加多个处理函数。

3.3 优化

如果事件函数可能会有变化，我们通常是重新注册事件函数

const btn = document.querySelector('button');

const invoker = ()=>{
    console.log('事件回调');
}

btn.addEventListener('click',invoker);

setTimeout(() => {
    btn.addEventListener('click',invoker);
}, 3000);

如果事件是频繁更新的, 那么通过btn.addEventListener频繁的添加、移除事件会有一定的性能开销, 因此, 我们可以采取以下的方式

const btn = document.querySelector('button');

const invoker = ()=>{
    invoker.value();
}

invoker.value = ()=>{
    console.log('事件回调');
}

btn.addEventListener('click',invoker);

setTimeout(() => {
    invoker.value = ()=>{
        console.log("事件回调更新");
    }
}, 3000);

这样，事件更新其实只是 invoker.value 的更新, 不需要更改 btn.addEventListener