JS事件

在標籤上加入事件名稱及方法就能建構事件

<style>
      .a{
          display: flex; 
         background-color:aqua;
         justify-content: center;
         width: 400px;
         height: 200px; 
      }  
      .b{
          background-color: rebeccapurple;
          width: 100px;
          height: 200px;
      }
      .c{
        background-color: red;
          width: 100px; 
          height: 100px;
          align-self: flex-end;
      }
      .d{
        background-color: green;
          width: 100px;
          height: 100px;     
      }
    </style>

 <div  class="flexbox a">
        <div class="flex-item b" onmouseout="normalImg(this)">
        </div>    
        <div class="flex-item c"></div>
        <div class="flex-item d"></div>
    </div>

而方法寫在script標籤內並用function 表達方法

<script>        
        function normalImg(x) {
            x.style.height = "600px";
          x.style.width = "600px";
        }
        </script>

而在前端最常用的莫不是滑鼠事件了
因此在這介紹滑鼠事件以及其用法

onclick :左鍵單擊元素時，將發生onclick事件。

oncontextmenu:右鍵單擊某個元素以打開上下文菜單時，將發生oncontextmenu事件

ondblclick: 左鍵雙擊元素時，將發生onclick事件。

onmousedown :元素上按下鼠標按鈕時，將發生onmousedown事件。
但這個跟onclick事件不同的是當發生onmousedown事件時按下鼠標便會觸發而onclick事件是按下後放開才觸發

onmouseenter:鼠標指針移到一個元素上時，會發生onmouseenter事件
也就是說當鼠標移入元素上時觸發，當在元素上繼續移動時便不會觸發onmouseenter事件

onmouseleave:當鼠標指針移出元素時，會發生onmouseleave事件

onmousemove :當指針在元素上移動時，onmousemove事件發生

onmouseout :當鼠標指針移出某個元素或其子元素之一時，會發生onmouseout事件
這個跟onmouseleave事件不同在於onmouseout事件在鼠標指針移出某個元素其子元素之一時也會觸發而onmouseleave事件不會

onmouseover :當鼠標指針移到一個元素或其子元素之一上時，會發生onmouseover事件
這個跟onmouseenter事件不同在於onmouseover事件在鼠標指針移入某個元素其子元素之一時也會觸發而onmouseenter事件不會

onmouseup:元素上釋放鼠標按鈕時，會發生onmouseup事件