技術 實踐拖曳功能

情境：實踐拖曳功能，並 POST 出對應欄位類似這種單字遊戲，把對應的答案移動到框框內，再送出答案 參考資料： HTML Drag and Drop AP...

技術 第 14 幅 － 事件監聽實作：一個畫版與一個被程式耽誤的畫家？

昨天分享了許多監聽的方法，今天就利用這些技能來完成一個畫版。大家還記得昨天的文章最後有問到實作畫版可能會用到幾種監聽？你們覺得呢？其實這次的實作我總共用到了「五...

技術 第 13 幅 － 事件監聽：誰在偷聽？偷聽什麼？

為了要讓後面的練習更加清晰（為了我自己），今天我們不進動畫實作，先來重溫一下網頁前端的「事件監聽」吧！事件監聽又稱為 addEventListener ，我們可...

技術 Day 25 - Event Capture, Propagation, Bubbling and Once

前言 JS 30 是由加拿大的全端工程師 Wes Bos 免費提供的 JavaScript 簡單應用課程，課程主打 No Frameworks、No Compi...

技術 事件—天外飛來一個e

剛開始學JavaScript的時候，在書上看到事件綁定的範例： //HTML <a id="link" href="htt...

技術 Chapter2 - Canvas動畫（II）用國中數學拆解Ease-out和Ease-in

如何計算每一偵的位移 首先我們改寫一下昨天的格式，還記得昨天我們用到的是這樣的寫法： cursorX+= distanceX / period; cursorY...

技術 Chapter1－DJ最愛的音頻動感圖像（II）只要是認識Canvas的都覺得它很High歐

完成上傳機制後，等著我們的是．．． 今天的一開始先花一點點時間，把昨天的事件監聽做完吧！這邊準備好一個基本的介面： Css就不做教學了XD，大家用自己喜歡的樣...

技術 Chapter1－DJ最愛的音頻動感圖像（I）基本流程圖 & 操作DOM介面

在開始前，還沒看過序章的朋友們，可以點擊進去，教學大綱和主題方向都寫在裡面囉！ 看完這章節，你會學到... 地基一定要打穩，如果基本的還不會的話，建議先去w...

技術 [DAY21]進階應用 - 監聽事件的處理(下篇)

大家好，延續昨天的主題，我們希望可以對父層元件body使用新增/移除eventListeners來綁定監聽事件，並且需要一個方法，可以在切換頁面後移除曾經註冊監...

技術 [DAY20]進階應用 - 監聽事件的處理(上篇)

今天要來談談SPA監聽事件的處理，由於篇幅的關係，文章分成上下兩篇，那麼就開始今天的主題吧。我們知道Javascript可以監聽瀏覽器事件，而且可以針對不同事件...