Saber2pr's Blog

事件捕获冒泡

/**
 * lisen
 * @param {string[]} ids
 * @param {boolean} isCatch
 */
const lisen = (ids, isCatch) =>
  ids.forEach(id =>
    document
      .getElementById(id)
      .addEventListener("click", () => alert(id), isCatch)
  )

// BubbleEvent
lisen(["root_b", "first_b", "second_b", "target_b"], false)

// CatchEvent
lisen(["root_c", "first_c", "second_c", "target_c"], true)

关于 addEventListener 的第三个参数 options 如果是 boolean 值，则 false 为冒泡事件，true 为捕获事件，默认为冒泡 如果是一个对象，即一个指定有关 listener 属性的可选参数对象。可用的选项如下：

  1. capture: Boolean，表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。

  2. once: Boolean，表示 listener 在添加之后最多只调用一次。如果是 true， listener 会在其被调用之后自动移除。

  3. passive: Boolean，设置为 true 时，表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。如果一个事件不需要 preventDefault，直接设置 passive true 可以起到优化作用。