新手自學筆記 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>