網頁的事件有很多種，以下將事件分類做介紹：

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

瀏覽器事件（網頁介面相關）

跟瀏覽器相關的事件，非常多，以下就較常用的做介紹

1. load 事件

當網頁資源載入完後，才會觸發 load 事件

2. DOMContentLoaded

一般來說，我們在載入 script 的時候，會把它放在檔案的最下面，因為我們要等所有的資源載完後，再執行 JavaScript 。

但是如果使用DOMContentLoaded，事件就會在 DOM 結構被完整讀取後就會觸發。

3.resize

RWD (雖然現在 CSS 有 @media 的方式可以調整螢幕大小，但有時還是有無法使用 @media 的情形)。

另外，根據 devise 的尺寸不同，網頁呈現不同的方向及大小時，會觸發到 resize。

滑鼠相關事件

JavaScript 的滑鼠事件有以下幾種

1. mousedown/mouseup

按下及放開滑鼠時會觸發事件。

2. mouseenter/mouseover/mouseleave/mouseout

滑入滑出觸發事件。

這裡將 mouseenter 和 mouseover 拿出來看，
可以試試看用下面的 Example

從 code 來看，用下面的 div 為例，如果是 mouseover 的行為來看，移入移出一次事件的觸發就會是 3 次， 進入 div 後碰到橘色範圍一次，接著白色範圍一次，最後移出時，也會經過橘色範圍一次。
但是 mouseenter 只會有一次，就是碰到 div 的時候。

let x = 0;
let y = 0;

    $(document).ready(function(){
      $("div.over").mouseover(function(){
        $(".over span").text(x += 1);
      });
      $("div.enter").mouseenter(function(){
        $(".enter span").text(y += 1);
      });
    });

3. click

點擊後，觸發事件。

這個 click 事件，應該是最常用的部分（以我這個新手來說，大部分的事件，都是以 click 來觸發）

以以下的 ToDoList 為例，按下 Add button 的時候就可以加入代辦事項。

ToDoList

拿在加入代辦事項的 code 就會如下：

let add = document.querySelector('.addData')
    add.addEventListener('click',addData)
    
    function addData(e){
      e.preventDefault()
      let txt = document.querySelector('.input').value
      let toDolist = {
        content : txt
  }
      data.push(toDolist)
      upDateList(data)
}

4. dblclick

點擊兩次後，觸發事件。

以上，明天鍵盤相關事件見