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

更新於 發佈於 閱讀時間約 1 分鐘

事件是什麼:

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

常見事件的種類:

  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>

avatar-img
0會員
7內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Yu Chun的沙龍 的其他內容
HTML DOM 是什麼? 根據HTML標籤建立的物件結構 每個HTML標籤在Javascript中都有對應的標籤物件 把HTML標籤物件串接在一起, 成為物件結構, 就稱之為HTML DOM HTML DOM (Document Object Model) 操作Document 物件: Docum
陣列是什麼: 按照順序存放其他資料的容器 Javascript 內建的物件 利用有順序的編號,來管理內部的資料 基本語法: 取得陣列長度: 陣列.length 取得陣列中特定編號的資料: 練習題:班上同學有五位,成績分別為 20,35,45,70,100, 請印出班上成績的總平均:
基本語法: 物件的函式: 呼叫函式的方法: this 在物件的用法: JSON 寫法:
HTML DOM 是什麼? 根據HTML標籤建立的物件結構 每個HTML標籤在Javascript中都有對應的標籤物件 把HTML標籤物件串接在一起, 成為物件結構, 就稱之為HTML DOM HTML DOM (Document Object Model) 操作Document 物件: Docum
陣列是什麼: 按照順序存放其他資料的容器 Javascript 內建的物件 利用有順序的編號,來管理內部的資料 基本語法: 取得陣列長度: 陣列.length 取得陣列中特定編號的資料: 練習題:班上同學有五位,成績分別為 20,35,45,70,100, 請印出班上成績的總平均:
基本語法: 物件的函式: 呼叫函式的方法: this 在物件的用法: JSON 寫法:
你可能也想看
Google News 追蹤
Thumbnail
現代社會跟以前不同了,人人都有一支手機,只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行,然而如今科技快速發展之下,金融App無聲無息地進到你生活中。但同樣的,每一家銀行都有自己的App時,我們又該如何選擇呢?(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
JavaScript 的事件處理是網頁開發中的重要部分,本文將介紹兩個常用的方法:event.stopPropagation() 與 event.preventDefault(),並簡要說明它們的作用與使用情境。
在上篇瞭解完Actions & Blinks的整個工作流程後,我們就來學習如何用程式碼構建屬於自己的Actions & Blinks吧!本篇詳細講解了要自製Actions & Blinks的所有步驟並提供範例程式碼給大家參考,相信能讓大家快速入門!
分享下最近製作 RM 上用到的一些 MZ 事件腳本 // 設定此事件的自開關 A 為 OFF $gameSelfSwitches.setValue('A', false) // 設定第 1 個地圖的第 3 個事件的自開關 A 為 OFF $gameSelfSwitches.setValue([1
Thumbnail
本章節的目的是介紹在TypeScript中如何進行例外處理。涵蓋了例外處理的重要性、語法、常見異常類型以及如何主動觸發異常訊息及用戶自定義異常訊息。為讀者提供了全面而深入的了解,以提高程式的可靠性、提供更好的反饋、增加程式的容錯性以及改善程式的可讀性。
Thumbnail
本章節提供了關於Typescript中流程控制元素的詳細介紹,包括if, else if, else語句,三元運算子,switch語句,各種for迴圈,while迴圈,循環嵌套和控制迴圈語句(break,continue和標籤)的使用。
  前言部分講得很淺,現在我們來深入認識一下「劇情」是做什麼的。   ※為避免怕大家搞混,以下都將情節稱為「事件」,還請見諒。 ❈❈❈   一、角色有推展、有動作,而不單單只是一個畫面,沒有前後,沒頭沒尾。   二、一個事件扣著一個事件,而不是這個做完了就沒事,完全延宕。   三、每個事件
※ 說明事件委派 (Event Delegation) ,背後的運作機制。 網頁元素接收事件的順序,流程有兩種個方向的傳遞: 由下而上的,稱為事件冒泡 (event bubbling) 由上而下的,稱為事件捕獲 (event capturing) ※ 事件冒泡 Event Bubbling
※ 函式基礎介紹: ※ JavaScript 特殊的函式特性: 函式可以當成值來傳遞 (可以放進變數或放進物件) 函式可以當成函式的參數 callback - 在特定事件中觸發函式 (非同步特性) ※ 函式的基本寫法: ※ 調用 (invoke) 函式: "調用" 意指呼叫或執行
※ switch用法: ​switch是 JavaScript 中的一個控制結構,是一種更結構化的方法來替代多個 if...else 語句,特別是當需要根據同一變數的多個值進行不同操作時非常有用。 ※ switch語法: switch 語句首先評估括號內的表達式 (expression)。
Thumbnail
本課程學習如何處理按鈕點擊事件並透過 Logcat 日誌輸出資訊確認按鈕邏輯是否正確。
Thumbnail
現代社會跟以前不同了,人人都有一支手機,只要打開就可以獲得各種資訊。過去想要辦卡或是開戶就要跑一趟銀行,然而如今科技快速發展之下,金融App無聲無息地進到你生活中。但同樣的,每一家銀行都有自己的App時,我們又該如何選擇呢?(本文係由國泰世華銀行邀約) 今天我會用不同角度帶大家看這款國泰世華CUB
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
JavaScript 的事件處理是網頁開發中的重要部分,本文將介紹兩個常用的方法:event.stopPropagation() 與 event.preventDefault(),並簡要說明它們的作用與使用情境。
在上篇瞭解完Actions & Blinks的整個工作流程後,我們就來學習如何用程式碼構建屬於自己的Actions & Blinks吧!本篇詳細講解了要自製Actions & Blinks的所有步驟並提供範例程式碼給大家參考,相信能讓大家快速入門!
分享下最近製作 RM 上用到的一些 MZ 事件腳本 // 設定此事件的自開關 A 為 OFF $gameSelfSwitches.setValue('A', false) // 設定第 1 個地圖的第 3 個事件的自開關 A 為 OFF $gameSelfSwitches.setValue([1
Thumbnail
本章節的目的是介紹在TypeScript中如何進行例外處理。涵蓋了例外處理的重要性、語法、常見異常類型以及如何主動觸發異常訊息及用戶自定義異常訊息。為讀者提供了全面而深入的了解,以提高程式的可靠性、提供更好的反饋、增加程式的容錯性以及改善程式的可讀性。
Thumbnail
本章節提供了關於Typescript中流程控制元素的詳細介紹,包括if, else if, else語句,三元運算子,switch語句,各種for迴圈,while迴圈,循環嵌套和控制迴圈語句(break,continue和標籤)的使用。
  前言部分講得很淺,現在我們來深入認識一下「劇情」是做什麼的。   ※為避免怕大家搞混,以下都將情節稱為「事件」,還請見諒。 ❈❈❈   一、角色有推展、有動作,而不單單只是一個畫面,沒有前後,沒頭沒尾。   二、一個事件扣著一個事件,而不是這個做完了就沒事,完全延宕。   三、每個事件
※ 說明事件委派 (Event Delegation) ,背後的運作機制。 網頁元素接收事件的順序,流程有兩種個方向的傳遞: 由下而上的,稱為事件冒泡 (event bubbling) 由上而下的,稱為事件捕獲 (event capturing) ※ 事件冒泡 Event Bubbling
※ 函式基礎介紹: ※ JavaScript 特殊的函式特性: 函式可以當成值來傳遞 (可以放進變數或放進物件) 函式可以當成函式的參數 callback - 在特定事件中觸發函式 (非同步特性) ※ 函式的基本寫法: ※ 調用 (invoke) 函式: "調用" 意指呼叫或執行
※ switch用法: ​switch是 JavaScript 中的一個控制結構,是一種更結構化的方法來替代多個 if...else 語句,特別是當需要根據同一變數的多個值進行不同操作時非常有用。 ※ switch語法: switch 語句首先評估括號內的表達式 (expression)。
Thumbnail
本課程學習如何處理按鈕點擊事件並透過 Logcat 日誌輸出資訊確認按鈕邏輯是否正確。