發表文章

JavaScript－event介紹(下)

-
圖片
JavaScript－event介紹(中)  ，我們介紹了阻擋預設行為（event.preventDefault）、阻擋事件冒泡（event.stopPropagation）、event.target、事件指派（event delegate)  這篇主要針對常用事件來做介紹   來源： 整理自Kuro大大文章   那些你知道與不知道的事件們 網頁上常用事件整理  介面相關事件 練習範例 1.load事件： 註冊在 window 物件上，指的是網頁資源 (包括CSS、JS、圖片等) 全數載入完畢後觸發。 2.unload、beforeunload事件： unload 與 beforeunload 事件分別會在 離開頁面 或 重新整理 時觸發，而 beforeunload 會跳出對話框詢問使用者是否要離開目前頁面。 3.error事件： error 事件會在 document 或是圖片載入錯誤時觸發。 很適合用在網頁上圖片不存在時，觸發寫法如下 <img src="image.jpg" onerror="this.src='default.jpg'"> 像這樣，當 image.jpg 這個圖檔不存在的時候，馬上就會觸發 error 事件。 此時就會透過 this.src 將 <img> 的 src 屬性替換成指定的預設圖檔 ，是相當實用的技巧。 4.resize、scroll事件 5.DomContentLoaded事件： 類似load事件，差異在於DomContentLoaded事件是在Dom元素結構被完整讀取跟解析後就會被觸發。如下圖（引用自Kuro系列文章） 鍵盤相關事件 1.keycode 使用 範例 var body = document.body; //console.dir(document) function goRocket(e){ //查詢按鈕是按到哪個鍵盤 console.log(e.keyCode); switch(e.keyCode){ case 97: document.querySelector('.r...
張貼留言
閱讀完整內容

JavaScript－event介紹(中)

-
上一集我們簡單介紹了何謂事件、常見事件綁定方式、事件流程這三個部分。若對於這些內容不清楚，歡迎到 Javascript- event介紹(上篇) 了解。 今天這篇文章主要會介紹以下幾個部分 阻擋預設行為（event.preventDefault） 阻擋事件冒泡（event.stopPropagation） event.target  事件指派（event delegate） stopPropagation介紹  練習連結 目的：阻止當前事件繼續進行捕捉（capturing）及冒泡（bubbling）階段的傳遞。  使用上記得要掛在子元素上，避免事件冒泡！ 天然範例： 1.<label> 與 <input type="checkbox">使用時  練習連結 （引用Kuro大大案例） 2.同一組DOM元素（父子元素）綁定相同事件時候，如下圖範例 // 點擊box var el = document.querySelector(".box"); el.addEventListener("click",function(e) { e.stopPropagation(); alert("box"); console.log("box"); },false); // 點擊body var elBody = document.querySelector(".body"); elBody.addEventListener("click",function() { alert("body"); console.log("body"); },false); 說明： 1.function一定要寫參數如e、event，否則js不知道誰要停止 補充說明： checkbox實際案例，修正label觸發兩次事件錯誤行為    連結 注意， stopPropagation() 不是掛在 label ，而是要放在 checkbox 上才有效！ 取消默認行為  練習連結 一般...
張貼留言
閱讀完整內容

Javascript－Json介紹

-
json： 是一種輕量級交換結構，目的在於讓資料與資料間能夠更方便解讀 而我們該如何取得json資料呢?最常見的就是政府公開資訊站 連結 補充： 1.chrome上的json 套件 目的：幫助我們瀏覽上更為方便，不會很混亂 2.下載到本機後開啟json資料 https://jsoneditoronline.org/ json如何擷取格式呢? Step1.先到公開資訊站  Step2.找尋想查詢資料  範例 Step3.按右鍵檢查網頁原始碼 將網頁資料複製  Step4.放入編輯器中，利用object、array特性擷取資料
張貼留言
閱讀完整內容

Javascript- event介紹(上篇)

-
圖片
本篇文章僅用來提供個人學習紀錄使用，部分內容轉載自 重新認識 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...
張貼留言
閱讀完整內容

javascript- localStorage介紹

-
圖片
看完這篇文章你會了解到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...
張貼留言
閱讀完整內容