新手自學筆記 day4 Javascript 事件處理

事件是什麼：

• 發生了一件事情
• 執行相對應的程式

常見事件的種類：

1. onclick 「點擊」
2. onmouseover 「滑鼠移入」
3. onmouseout 「滑鼠移出」
4. onmousedown 「滑鼠按住」
5. onmouseup 「滑鼠放開」

事件處理的三大關鍵：

1. 在哪個事件上發生
2. 事件的種類是什麼
3. 執行事件對應的函式

事件處理範例一：

• 利用this 關鍵字代表觸發事件的標籤

<div onclick="change(this);">原本的內文</div> // this 代表 div 這個標籤

<script>

　　function change(elem){  

　　　　elem.innerHTML="全新的內文";

　　}

</script>

事件處理範例二：

• 多個事件處理
• 滑鼠移入﹑移出的處理範例
• 當滑鼠移入時, 字體變成粗體, 移出後恢復成一般字體

<span

　　onmouseover="over(this);"

　　onmouseout="out(this);" 

>點我</span>

<script>

　　function over(elem){

　　　　elem.style.fontWeight="bold";

　　} 　　

　　function out(elem){

　　　　elem.style.fontWeight="normal";

　　}

</script>