自定义事件

Yang大约 1 分钟

事件构造器

内建事件类形成一个层次结构，类似于 DOM 元素类。根是内建的 Event 类
内建事件（click）和自定义事件的冒泡机制相同，自定义事件也有捕获阶段和冒泡阶段

let event = new Event(type[, options])

type：事件类型，可以是像这样 click 的字符串，或者我们自己的像这样 my-event 的参数
options：具有两个可选属性的对象
- bubbles：如果为 true，那么事件会冒泡
- cancelable：如果为 true，那么默认行为就会被阻止

dispatchEvent

在元素上调用自定义事件

let event = new Event("click");
elem.dispatchEvent(event);

event.isTrusted

区分“真实”用户事件和通过脚本生成的事件
来自真实用户操作的事件，event.isTrusted 属性为 true
脚本生成的事件，event.isTrusted 属性为 false

标准构造器

正确的构造器允许为该类型的事件指定标准属性，通用的 Event 构造器不允许这样做

UIEvent
FocusEvent
MouseEvent
WheelEvent
KeyboardEvent

// 标准构造器
let event = new MouseEvent("click", {
  bubbles: true,
  cancelable: true,
  clientX: 100,
  clientY: 100
});

alert(event.clientX); // 100

// 通用 Event
let event = new Event("click", {
  bubbles: true, // 构造器 Event 中只有 bubbles 和 cancelable 可以工作
  cancelable: true,
  clientX: 100,
  clientY: 100
});

alert(event.clientX); // undefined，未知的属性被忽略了！

自定义事件

和 Event 一样。除了一点不同，在第二个参数（对象）中，可以为想要与事件一起传递的任何自定义信息添加一个附加的属性 detail

<h1 id="elem">Hello for John!</h1>

<script>
  // 事件附带给处理程序的其他详细信息
  elem.addEventListener("hello", function(event) {
    alert(event.detail.name);
  });

  elem.dispatchEvent(new CustomEvent("hello", {
    detail: { name: "John" }
  }));
</script>