chunwen's blog

本篇文章僅用來提供個人學習紀錄使用，部分內容轉載自 重新認識 JavaScript: Day 14 事件機制的原理 ，若有違規再請告知，謝謝。 這篇文章主要會介紹幾個主題： Event 是什麼? 常見三種事件註冊綁定方式 event flow說明 JavaScript是一個事件驅動(Event-driven)的程式語言，當瀏覽器載入網頁開始讀取後，雖然會馬上讀取 JavaScript 事件相關的程式碼，但是必須等到「事件」被觸發(如使用者點擊、按下鍵盤等)後，才會再進行對應程式的執行。 舉個簡單例子： 設置在公司門外的電鈴，今天必須有人點擊電鈴，才會觸發電鈴作響，若沒有人點擊就不會發生任何事。 換做網頁來說明的話，事件就是瀏覽器會在使用者進入網頁後去判斷、監聽使用者行為。如：滑鼠滑過、網頁畫面大小拉動等等 常見三種事件註冊綁定 1.on-event 處理器 (HTML 屬性)---舊式寫法  範例 >>可以透過 on+事件名 的屬性來註冊事件 < body > < input type = "button" value = "點擊我" onclick = " alert('hi')" class = "btn" > < script src = "js/all.js" > < / script > </ body > 說明： 1.直接在html上 載入onclick事件 缺點： 1.較不推薦使用，因為使用 onclick 時，該元素只能綁定一個事件 2.此外基於程式碼的使用性與維護性也不建議使用。詳情可參考 非侵入式JavaScript 2.on-event 處理器 (非 HTML 屬性)   程式碼 連結 像是 window 或 document 此類沒有實體元素的情況，我們一樣可以利用 DOM API 提供的「on-event 處理器」(on-event handler) 來處理事件： window.onload = func...

看完這篇文章你會了解到localStorage是什麼?同時localStorage的一些常用用法該如何操作(如：setItem、getItem)等。文章中也有搭配案例做練習示範，可以即時確認自己是否理解。   備註：本文章內容整理自六角學院 JavaScript 入門篇 - 學徒的試煉 ，若內容有誤再請各位大大告知，感謝! 簡介： localStorage會將網頁資料儲存下來，並透過網址紀錄  EX： https://www.udemy.com/ 補充： localStorage、sessionStorage、cookie比較介紹 連結     請注意，localStorage只會儲存String型態資料(如 數字、布林值、字串 ) 我們可以透過chrome開發工具--application觀察 接著我們就直接進入主題，介紹localStorage常用方法 setItem、getItem操作方式 setItem用來建立新的屬性 getItem可以取出特定值 語法： localStorage.setItem（key,value）; key 自行創建 value 對應的值   //value 的型態只有 String!!! var str = "tom" ; localStorage.setItem( "myName" , str); console.log(localStorage.getItem( 'myName' )); //tom setItem、getItem 實作練習 連結 //HTML結構 < h2 > 請輸入你的姓名 </ h2 > < input type = "text" class = "textClass" > < input type = "button" value = "點擊" class = "btnClass" > < input type = "button...