前言

每次接觸新的技巧先是感到陌生、好奇，當然一定會有許多不理解的地方，不知到該如何處理，但是隨著慢慢拆解它，看一次不懂，就再看第二次、第三次...或是找其他資源學習，都能夠讓我減緩緊張，重新整理心情再次面對難題。

像是前幾天文章，針對抓到的元素，給予樣式、增減HTML中的文字等互動，原本以為已經差不多了，沒想到～我們還能夠建立事件，如滑鼠點擊、鍵盤輸入等事件，透過增加這些事件活動，讓網站更加豐富。但是相對的也更加複雜，要註冊事件、建立函式，並在函式中去撰寫執行任務的程式碼。

學習的資源

1. 網頁前端工程入門：Javascript 事件處理 - 基本教學，教學內容相當基礎，從在標籤內綁定事件處理、註冊事件綁定，搭配常見事件進行實例介紹。

2. w3schools - js_events，在 w3schools 有對於 JS 事件的介紹。

介紹

eventListener 註冊事件

• element.addEventListener('click', onClick);
  • 在element上面新增一個addEventListener，事件名稱：click,執行函式：onClick
  • 當事件發生，瀏覽器就會觸發onClick函式 =>稱為callback function

div id="myyo">
    yo!
    <a>hello~</a>
  </div>
  <script>
    
    const element = document.querySelector('#myyo');
    element.addEventListener('click', onClick);

    function onClick() {
      alert('click')
    }
    //後面接監聽的事件名稱
    //在element上面新增一個addEventListener，事件名稱：click,執行函式：onClick
  </script>

• 也可以直接在後面宣告函式 => 匿名函式

const element = document.querySelector('#myyo');
    element.addEventListener('click', function () { 
      alert('click')
       });

常見事件

簡易理解方式：on+事件名稱

• onclick : 點擊後發生事件
• onmouseover :當滑鼠移到相對應區塊產生事件
• onmouseout : 當滑鼠移出相對應區塊產生事件
• onkeydown : 當鍵盤案件按下時執行事件

更多事件範例：HTML DOM Events