[Day 16] JavaScript 网页事件处理

前言

每次接触新的技巧先是感到陌生、好奇，当然一定会有许多不理解的地方，不知到该如何处理，但是随着慢慢拆解它，看一次不懂，就再看第二次、第三次...或是找其他资源学习，都能够让我减缓紧张，重新整理心情再次面对难题。

像是前几天文章，针对抓到的元素，给予样式、增减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