Hi，大家好，我是Tony，是一個對於JavaScript有一點點概念的新手。
挑戰第19天了，加油！
今天的學習內容是：JavaScript 事件處理(Event Handling)
彭彭老師說今天的內容是入門當中的最後一個主題。
學習內容來自
彭彭老師JavaScript Event Handling 事件處理
https://www.youtube.com/watch?v=7qjRxCPI7f8&list=PL-g0fdC5RMbqW54tWQPIVbhyl_Ky6a2VI&index=24昨天的學習內容：[Day 18] JavaScript HTML DOM 網頁標籤選單練習-自我簡歷頁面
https://ithelp.ithome.com.tw/articles/10346273
事件，就是在網頁上發生了一件事情。
事情發生了，就是要去執行相對應的程式來處理，
也就是事件處理。
不同的事件種類，會有不同的觸發時機。
以下是常見的事件種類：
在事件處理的時候有三大關鍵點需要去注意！
了解關鍵點後，開始來處理要做的程式。
要在某個標籤上將函式與事件做對應，就要註冊事件處理函式。
基本語法：在div、button標籤中，寫入 事件名稱="程式碼"。範例如下，
<div 事件名稱="程式碼">我是標籤內文</div>
<button 事件名稱="程式碼">我是標籤內文</button>
帶入事件與程式碼就會寫成如下方的例子：
<div onclick="change();">點擊</div>
<script>
function change(){
document.body.innerHTML="Hello";
}
</script>
在這裡使用this關鍵字，代表觸發事件的標籤
下方範例中的this，指的就是div標籤
<div oncilck=change(this);>我是原本的內文</div>
<script>
function change(elem){
elem.innerHTML="我是新的內文";
}
</script>
程式的意思是，
點擊文字內容(this)"我是原本的內文"，
觸發函式，函式傳進參數代表div，之後改變內文為"我是新的內文"。
直接來看程式語法：
<button
onmousedown="down(this);"
onmouseup="up(this);"
>我是按鈕</button>
<script>
function down(elem){
elem.style.color="red"
}
function up(elem){
elem.style.color="black"
}
</script>
程式的意思是，
滑鼠按下按鈕不放開，按鈕變成紅色，
滑鼠放開按鈕，按鈕變成黑色。
針對按鈕這個標籤，有兩個事件在運作。
了解這些概念後，接著進入練習。
先利用console.log來印文字，對應觸發的事件，
來了解自己觸發了哪些事件。
<body>
<h3>各種類事件的觸發練習</h3>
<button
onclick="console.log('點擊事件')"
onmouseover="console.log('滑鼠移入')"
onmouseout="console.log('滑鼠移出')"
onmousedown="console.log('滑鼠按住')"
onmouseup="console.log('滑鼠放開')"
>點我</button>
</body>
網頁結果1 (點擊Youtube影片播放)
原本內建的按鈕程式不太好看，
利用span，結合CSS，製作按鈕。
搭配多個事件，觸發不同的效果。
<head>
<style>
.btn{
background-color:#ffcccc;
padding:15px;border-radius:10px;
cursor:pointer;
}
</style>
</head>
<body>
<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>
網頁結果2 (點擊Youtube影片播放)
滑鼠移入，按鈕顏色改變。
滑鼠移出，按鈕顏色變回原本的樣子。
滑鼠按住，字體變粗。
滑鼠放開，字體變回原本樣子。
以上就是今天的學習內容！
終於開始有在設計自己網頁的感覺了~
謝謝大家，前幾天還有東西要補起來，希望可以趕快補上！
我們明天見。
<div oncilck=change(this);>我是原本的內文</div>
oncilck 打錯字，應為 onclick
iThome鐵人賽
看影片追技術