D15 第七周 前端基础 JavaScript - 事件传递

今天要分享的是事件传递的机制，相信初学的大家听到比较多的应该是捕获、冒泡、stopPropogation、preventDefault 之类的字眼。

当初同学在讨论区发问，这一题主要是不清楚 stopPropogation 和 preventDefault 的差别。

我自己区分两者的方式就是 stopPropogation 挡事件传递，preventDefault 挡浏览器预设行为。
假如分不清楚两个差别的话，那就全部都挡比较安心。

preventDefault 主要会用到的情境是 <a>, <input type="submit"> 点击触发特殊效果的时候，因为 <a> 连结会造成页面跳转，<input type="submit"> 送出按纽也会造成页面跳转。如果想要实作一些不一样的效果，通常会把浏览器预设行为挡掉，避免干扰。

捕获和冒泡的使用时机，主要是在事件代理的时候，这算是进阶用法。在课程中做 todo list 的时候，如果每一个待办事项的按纽都要挂事件监听会很麻烦，所以这时候就会希望统一把这些按钮要做的事情统一给上一层的母元素 (父元素?) 处理，这样子就不用那麽麻烦要一直新增事件监听。

const btn = doctype.querySelector(".delete-btn")
btn.addEventListener("click", function removeItem(e) {
  let item = e.target.closest(".item")
  if (item) item.remove()
})

原本的写法，每一个按钮在生成的时候都要新增一次，而且在删除项目的时候还要解除事件监听，有点麻烦。

const list = doctype.querySelector(".list")
list.addEventListener("click", function removeItem(e) {
  if (e.target.matches(".delete-btn")) {
    let item = e.target.closest(".item")
    if (item) item.remove()
  }
})

事件代理的写法，事件监听挂在上一层的列表元素。执行前要先检查触发事件的 class 是不是原本要执行的那一个 class？剩下要做的事情基本上也差不多，其实也没想像中那麽复杂，欸嘿 （<ゝω・)☆

剩下就是 this 滥用的问题，我自己用事件监听的时候是没有使用 this 的，建议尽量用 e.target 就好。因为这是一个蛮讨厌的坑，所以我都不太用 this 的。

以上，这就今天的分享，泄泄缩看 <(_ _)>