Dispatch Event

自定义事件只能使用 addEventListener。

new Event("type", {
  bubbles: false, // true，会冒泡
  cancelable: false, // true，“默认行为”会被阻止
});

type 可以是任意字符串

elem.dispatchEvent(event);

dispatch 发起的事件，event.isTrusted 是 true

例：

document.addEventListener("hello", function (event) {
  alert("Hello from " + event.target.tagName); // Hello from H1
});

let event = new Event("hello", { bubbles: true }); // (2)
elem.dispatchEvent(event);

如果你想使用 MouseEvent ，那就就应该 new MouseEvent 而不是 new Event

MouseEvent 有些属性，Event 并没有！

Custom Event

从技术上讲，CustomEvent 和 Event 一样

但是 CustomEvent 还支持一个附加的属性 detail

new CustomEvent("hello", {
  detail: { name: "qins" },
});

Custom Event 的 event.preventDefault()

自定义事件是没有 “默认行为” 的。

所以 自定义事件的 event.preventDefault() 有其他用。

rabbit.addEventListener("hide", function (event) {
  //（1）
  event.preventDefault();
});

const event = new CustomEvent("hide", {
  cancelable: true, // 没有这个标志，preventDefault 将不起作用
});

//（1）是否 event.preventDefault() 会体现在 result 上
// 为true 就使用了 event.preventDefault()
const result = rabbit.dispatchEvent(event);

事件队列

通常 Event 是在队列中处理的。

即使 一个一个来：mousedown -> mousemove -> mouseup。

但是 一个 Event 是在另一个 Event 中发起的，会立刻执行。如 dispatchEvent

menu.onclick = function () {
  alert(1);

  menu.dispatchEvent(
    new CustomEvent("menu-open", {
      bubbles: true,
    })
  );

  alert(2);
};

document.addEventListener("menu-open", () => alert("nested"));

顺序为：1 → nested → 2

要避免这种情况，使用 setTimeout 0

setTimeout(() =>
  menu.dispatchEvent(
    new CustomEvent("menu-open", {
      bubbles: true,
    })
  )
);

此时顺序为：1 → 2 → nested