上一篇整理了 JavaScript 操縱網頁元件事件的基本流程：

1. 指定網頁元件，可用 getElementById 或 getElementsByClassName。
2. 針對網頁元件設定 addEventListener；指定監聽的事件與執行的對應function。

而可使用得事件相當多元，除了常見的滑鼠事件、鍵盤事件與觸控事件之外，還有載入事件、表單欄位相關的事件等，除了透過監測事件來進行更多元的互動外，很多時候也用於數據蒐集層面，利用事件來定義那些使用者行為是重要的、有價值的，已用於後續的使用分析進行更多優化。

利用CSS :hover可以改變網頁元件的狀態，與JavaScript這邊的mouseover事件相同，但如果看CSS這邊的寫法可以發現，我們指定的是「網頁元件的hover狀態」，所以基本上這裡只能改變的CSS樣式狀態只有網頁元件本身，因此，要能夠跳脫網頁元件，指定其他部分、改變文字內容、邏輯條件運算或執行重複行為等，使用 JavaScript 來處理就最適合不過了，同時，JavaScript這邊提供的事件比起CSS來說更豐富完整，所以相當多網頁動態利用JavaScript撰寫，另外也有相當多針對動態相關的Library發展。

當然，CSS可以做到的部分不一定要改寫成JavaScript，依照開發體驗與專案需求選擇即可。

在使用JavaScript時，也可以CSS搭配transition，讓轉場更加流暢：

    body{
        background-color: white;
        transition: background-color 1s ease;
        }

<script type="text/javascript">
//1.指定網頁元件
    let item=document.getElementsByClassName('my-div')[0];
    let webpage=document.getElementsByTagName('body')[0];
//2.監聽事件與對應function
    //滑鼠移至物件時
    item.addEventListener('mouseover',
    function(){
        webpage.style.backgroundColor = 'gray'});
    //滑鼠離開物件時    
    item.addEventListener('mouseout',
    function(){
      webpage.style.backgroundColor = 'white'})
</script>