Day10——JavaScript Event Handling 事件處理、Event bubbling

2024 iThome 鐵人賽

DAY 9

佛心分享-IT 人自學之術

JavaScript自學分享系列第 10 篇

16th鐵人賽

姐姐恩

2024-09-22 00:23:40

86 瀏覽

分享至

大家好～我是姐姐恩！身為資訊小白的我，起初對於參賽主題非常苦惱，最後決定利用此次機會，延續學校的課(Java)，了解網頁前端三劍客之一的JavaScript！
所以接下來30天，我將在這裡紀錄我當天的學習筆記及統整後的學習內容，請大家多多指教！
＊學習內容主要取自MDN Web Docs及彭彭老師的YT課程。

Day10——JavaScript Event Handling 事件處理、Event bubbling

事件:只網頁上一件事情的發生，如click點擊、mouseover滑鼠移入、mouseout滑鼠移出、mousedown滑鼠按下等等。

事件處理的三個關鍵：在哪個標籤上發生事件、事件的種類為何、事件對應的處理函式。

註冊事件的處理函式(事件對應的處理函式):在某個標籤上，將函式與事件作對應。
一個標籤可以搭配多個事件。

//基本語法
<div 事件名稱="程式碼"> 標籤內文 </div>
<button 事件名稱="程式碼"> 標籤內文 </button>

跟著影片練習:

onclick="空白":點擊才切換。

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <title>JavaScript : 事件處理</title>
        <style>
            .btn{
                background-color: #ffcccc;
                padding:5px;border-radius: 5px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <h3>事件處理練習</h3>
        <!-- <button onclick="console.log('點擊事件');" 
        onmouseover="console.log('滑鼠移入');"
        onmouseout="console.log('滑鼠移出');"
        onmousedown="console.log('滑鼠按住');"
        onmouseup="console.log('滑鼠放開');"
        > 點我 </button>   -->
        <span 
            class="btn"
            onmouseover="over(this);"
            onmouseout="out(this);"
            onmousedown="down(this);"
            onmouseup="up(this);"
        >按鈕一</span>
        <span 
            class="btn"
            onmouseover="over(this);"
            onmouseout="out(this);"
            onmousedown="down(this);"
            onmouseup="up(this);"
        >按鈕二</span>

        <script>
            function over(elem){
                elem.style.backgroundColor="#ddaaaa";
            }
            function out(elem){
                elem.style.backgroundColor="#ffcccc";
            }
            function down(elem){
                elem.style.fontWeight="bold";
            }
            function up(elem){
                elem.style.fontWeight="normal";
            }
        </script>
    </body>
</html>

印出:
(將滑鼠放至按鈕上)

(點擊的當下)