昨天我們說到了網頁的事件中的鍵盤事件和表單相關事件，今天我們繼續了解剩下的事件：

1. 瀏覽器事件（網頁介面相關）
2. 滑鼠相關事件
3. 鍵盤相關事件
4. 表單相關事件
5. 特殊事件
6. 自訂事件

特殊事件 composition event

「Composition Events」的 event 是從 DOM Level 3 之後才新增的。

在搜尋資料，大致上理解到為什麼會有這個 composition event產生。
原因是因為，在 input 輸入時，會藉由 keyboard(鍵盤事件來偵測)，看看輸入的內容是不是有變動。

舉例來說，我們在搜尋輸入字時，如果我使用的是拼音輸入法，我想搜尋 “胖子” 用拼音輸入時，就是"pangzi" ，在我輸入下 pan 的時候，已經捕捉到"pan"三個字元，在列表中已搜尋出一大堆有關"pan"的資訊，這樣很明顯出現了問題。

在 DOM 事件中的CompositionEvent(組成事件)，主要是在 input 和 textarea 來輔助解決這樣的問題。我們可以使用 compositionend 來做最後的確認。

CompositionEvent(組成事件)共有三個事件:

• compositionstart
  要開始輸入時觸發（輸入法出現的那一刻）
• compositionupdate
  輸入新的字元的時候觸發
• compositionend
  選擇字或是詞完成時觸發

自訂事件

自訂事件是在標準事件外，我們可以自己建立的事件

主要是由 JS 原生的 Event() 和 CustomEvent() 函數來建立。

1. Event()

let myEvent = new Event(typeArg, eventInit)

下面的例子是：

自訂事件名字是"pingan"，而事件就是支持冒泡事件且不能被取消。

觸發事件的方式是 dispatchEvent(myEvent)

let myEvent = new Event("pingan", {"bubbles":true, "cancelable":false});

document.dispatchEvent(myEvent);

2. CustomEvent()

如果想要在自訂事件內放入更多的資料時，可以用 CustomEvent()

以下的例子，我們自訂了一個 "cat"，並且可以用 event 來接收，接著用dispatchEvent 來觸發事件。

obj.addEventListener("cat", function(e) { process(e.detail) });

let event = new CustomEvent("cat", {
  detail: {
    hazcheeseburger: true
  }
});
obj.dispatchEvent(event);

瀏覽器的事件還有很多，建議可以上
https://developer.mozilla.org/en-US/docs/Web/Events 慢慢看

以上，我們明天見。