17-1 Event: onclick(), Event flow

Original: https://course.andys.pro/Javascript-Intro/17-1-event-onclick-event-flow/

講義

1. 什麼是事件 (Event)？

網頁上的互動（如點擊按鈕、輸入文字、滑鼠移過）都稱為「事件」。

• 標籤內的處理器：在 HTML 標籤中直接定義 on 開頭的屬性，例如：<button onclick="myFunc()">點我</button>。
• 「on」的含義：可以理解為「當…發生時」。例如 onclick 就是「當點擊發生時」。

2. 常見的滑鼠事件

• click：滑鼠點擊。
• mouseenter：滑鼠移入。
• mouseleave：滑鼠移出。
• 透過 JavaScript，我們可以捕捉這些動作並觸發豐富的動畫或功能，而不僅僅是 CSS 的簡易模擬。

3. 事件流 (Event Flow)

當你點擊一個按鈕時，這個點擊訊號並不是直接出現在按鈕上，而是在 DOM 樹中經歷一段旅程。

• 捕獲階段 (Capturing Phase)：訊號由最外層（Window / Document）往內，逐層傳遞到目標元素（由大到小）。
• 冒泡階段 (Bubbling Phase)：訊號從目標元素由內往外傳回最外層（由小到大）。就像水底的泡泡往上冒一樣。
• 重要性：理解事件流可以幫助我們決定在哪一層處理事件，避免多個重疊元素的事件互相干擾。

4. 元件化與監聽

• Event Target：我們可以針對整個 document 監聽，也可以針對特定的小元件進行監聽。
• Event Listener：除了寫在 HTML 標籤內，更好的做法是使用 JavaScript 動態添加監聽器，這可以讓程式碼與畫面結構分離，更易於維護。

5. 小結

事件處理是賦予網頁程式生命的關鍵。透過監聽各種行為，我們可以做出導覽列彈出、拖曳物件、即時驗證表單等互動功能。

影片逐字稿 (AI 生成)

好 我們現在來到17章 事件處理那在第17章我們學習目標有就是17-1 17-2 17-3那我們要來處理標籤內事件的處理器然後我們要來看add event listener 這邊要多一個r喔Listener好 再來我們要看一下滑鼠事件比如說我們在HTML 在CSS 比較難處理到這些滑鼠的事件嘛比如說我點這邊可以做到什麼事情或是我滑到這個框框上它會跳出動畫 或是跳出什麼東西以前我們只有可能mouse over 然後跑出一些CSS的屬性可是我們在JavaScript 裡面我們可以把就是 瀏覽器給我們一些特性可以用到更的極致或是你們可以發揮創意做出更多更厲害的動畫 或是效果好的 我們來看17-1 標籤內的事件處理器那最常見的就是點 點東西嘛on clickOK那再來是 event 它的定義 和它的事件流程是怎麼走的好首先 我們前面已經有提到就是說 怎麼樣把一個HTML 跟一個JS 怎麼融合在一起那我們有做到一個東西 是有一個Button它有一個on click那我們有一個Buttonon click的情況下這裡面我們就會放下JavaScript的 function 名稱或是直接把一個匿名的 function 直接放在裡面也可以那有幾個常見的 事件處理器一個是mouse click或mouse entermouse leavemouse enter和mouse leave 是假如說我們有一個框框然後我進去的時候叫什麼 我的滑鼠移進去 叫做mouseenter他 離開的時候叫做mouseleave好 那大家會說那老師為什麼我在click在mouse enter和mouse leave這邊 前面要叫做一個on因為它是一個 有點像是頁面自動會去處理就是clickmouse enter和mouse leave的一些做法那我們要用on的原因是因為我今天我要先預設說如果當這件event 這個事情發生的時候那我們要做什麼事情所以我們有點像是加了一個監聽器在上面但它 比如說像on click 有點像是當我走出這個門的時候要叫助老師或是什麼等等之類對不對那所以dang就是用dang這件事情就是on有沒有on clickdang使用on下去dang滑鼠移進去當滑鼠離開的時候那要做什麼樣的function那on你就把它當作是dang來想就好dang什麼事情發生好那event事件的定義首先呢event介面會表示一個DOM上面所發生的事件那這些事件有可能是使用者操作的行為所產生或是有可能API就是API就是機器的interface然後處理非同步任務所產生那非同步就是大家可以了解一下它的英文就如果你們有看一些文檔的話非同步就是async我的字好錯同步大家知道同步是sync嘛對不對那非同步就是async那事件有可能是由那種程式所觸發比如說可能有另外一個JavaScript library也在做這件事情那所以event本身有所有的事件的共同屬性和方法所以我們在這邊講到就是說我們其實是在做監聽的動作就是listen這件事情那所以我們要做的是比如說event就是你在哪一個地方去加上一個event listener那現在我們比較多都是the target都是放在document裡面那如果之後我們在做更複雜的網頁或是我們可能在react或是不同的不同的library裡面或是platform裡面在做事情的時候它可能我們會把我們的網頁做得越來越元件化就是比如說我們現在是寫一個頁面以後我們可能如果團隊很大的話可能會我們只處理到比如說像Facebook旁邊的側欄或是旁邊的一個小工具的功能那我的event listener就會希望說我只監聽在這個框框裡面我的小工具所發生的事情就好了而不是整個頁面去監聽它因為可能一個頁面可能分了很多個區塊那我們可能只所以這個是event target就是說現在我們都是去抓document以後我們可能去抓更小的一些一些物件好的那我們可以加這個我們可以開始監聽然後我們也可以把監聽的東西把它移掉就說比如說我現在onclick已經做了好多次了以後就不需要了我們就可以把它刪掉這樣子那其實一個元素可以有多個事件的處理器那因為我們的library就是我們如果可能裝了很多不同的插件就可能會遇到這樣的狀況比如說像一個連結它可能我們可以加一些事件處理器就是說我可能有一個是把這個連結在頁面裡面就彈跳打開或是點下去以後會發生什麼事情那這個時候我們可能就是在點下去在這個link上面的onclick可能就會有很多不同的插件所以一起都會就是它有不同的在click 的時候它會有很多個事件處理器好了這邊我們要提到的就是說event flow這件事情主要呢它有兩個face一個是capturing face就是我們可以想說是大到小那bubble face是由小到大那它達到的效果也會不太一樣一個是大到小一個是小到大好的那這邊呢如果大家先理解一下onclick去試用看看然後這邊我們也可以把就是button然後就加一個onclick function然後在script裡面呢我們去跑然後讓事件去做觸發那有一些example我會把它放在我們的那個paper上面讓大家直接來看有幾個html檔那這邊是17-1

影片逐字稿largev2

我們現在來到十七章事件處理那在第十七章我們學習目標就是十七之一、十七之二、十七之三那我們要來處理標籤內事件的處理器然後我們要來看Add Event Listener這邊要多一個R喔Listener好再來我們要看一下滑鼠事件比如說我們在HTML在CSS比較難處理到這些滑鼠的事件嘛比如說我點這邊可以做到什麼事情或是我滑到這個滑到這個框框上它會跳出動畫或是跳出什麼東西以前我們只有可能Mouse Over然後會跑出一些CSS的屬性可是我們在JavaScript裡面我們可以把就是瀏覽器給我們一些特性可以用到更的極致或是你們可以發揮創意做出更多更厲害的動畫或是效果好的我們來看十七之一標籤內的事件處理器那最常見的就是點東西嘛UnclickOK那再來是Event它的定義和它的事件流程是怎麼走的首先我們前面已經有提到就是說怎麼樣把一個HTML跟一個JS怎麼融合在一起那我們有做到一個東西是有一個Button它有一個Unclick那我們有一個ButtonUnclick的情況下這裡面我們就會放下JavaScript的Function名稱或是直接把一個匿名的Function直接放在裡面也可以那有幾個常見的事件處理器一個是MouseClick或MouseEnterMouseLeaveMouseEnter和MouseLeave是假如說我們有一個框框然後我進去的時候我的滑鼠移進去叫做MouseEnter離開的時候叫做MouseLeave那大家會說那老師為什麼我在Click在MouseEnter和MouseLeave這邊前面要叫做一個On因為它是一個有點像是頁面自動會去處理就是ClickMouseEnter和MouseLeave的一些做法那我們要用On的原因是因為我今天我要先預設如果當這件事Event這個事情發生的時候那我們要做什麼事情所以我們有點像是加了一個監聽器在上面當它比如說像Unclick有點像是當我走出這個門的時候要叫住老師或是什麼等等之類所以當就是用當這件事情就是On有沒有Unclick當使用On下去當滑鼠移進去當滑鼠離開的時候那要做什麼樣的function那On你就把它當作是當來想就好當什麼事情發生好那Event事件的定義首先呢Event介面會表示一個DOM上面所發生的事件那這些事件有可能是使用者操作行為所產生或是有可能APIAPI就是機器的interface然後處理非同步任務所產生那非同步就是大家可以了解一下它的英文就是如果你們有看一些文檔的話非同步就是Async我的字好醜同步大家知道同步是Sync嘛對不對那非同步就是Async那事件有可能是由程式所觸發比如說可能有另外一個Javascript Library也在做這件事情那所以Event本身有所有的事件的共同屬性和方法所以我們在這邊講到就是說我們其實是在做監聽的動作就是Listen這件事情那所以我們要做的是比如說Event就是你在哪一個地方去加上一個Event Listener那現在我們比較多都是Target都是放在Document裡面那如果之後我們再做更複雜的網頁或是我們可能在React或是不同的不同的Library裡面或是Platform裡面在做事情的時候它可能我們會把我們的網頁做得越來越元件化就是比如說我們現在是寫一個頁面嘛以後我們可能如果團隊很大的話可能會我們只處理到比如說像Facebook旁邊的側欄或是旁邊的一個小工具的功能那我的Event Listener就會希望說我只監聽在這個框框裡面我的小工具所發生的事情就好了而不是整個頁面去監聽它因為可能一個頁面可能分了很多個區塊那我們可能只所以這個是Event Target就是說現在我們都是去抓Document以後我們可能去抓更小的一些一些物件好的那我們可以加這個我們可以開始監聽然後我們也可以把監聽的東西把它移掉就是說比如說我現在onclick已經做了好多次了以後我們就不需要了我們就可以把它刪掉這樣子那其實一個元素可以有多個事件的處理器OK那因為我們的Library會越就是我們如果可能裝了很多不同的插件就可能會遇到這樣的狀況比如說像一個連結它可能我們可以加一些事件處理器是說我可能有一個是把這個連結在頁面裡面就彈跳打開或是點下去以後會發生什麼事情那這個時候我們可能就是在點下去on event在這個link上面的onclick可能就會有很多不同的插件所一起就是它有不同的在click的時候它會有很多個事件處理器好了這邊我們要提到的就是說event flow這件事情主要呢它有兩個phase一個是capturing phase就是由我們可以想說是大到小那bubble phase是由小到大OK那它有它達到的效果就會也會不太一樣喔OK一個是大到小一個是小到大好的那這邊呢如果大家先理解一下onclick去試用看看然後這邊我們也可以把就是button然後就加一個onclick function然後在script裡面呢我們去跑然後讓事件去做觸發那有一些example我會把它放在我們的那個paper上面讓大家直接來看有幾個html檔OK那這邊是17-1