發表文章

目前顯示的是 7月, 2019的文章

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