# html5筆記 - 版號概念 3.6.0 原版 3.6.==1== 修bug 3.==7==.0 加強功能 ==4==.0.0 大幅度修改 1. 建立js事件監聽，包含==物件、事件、處理函數== ```javascript= 1. html <body onload = "doFirst()"> <<避免使用>> 2. js window.onload = doFirst; 3. js window.addEventListener("load", doFirst); <<w3c推薦>> event -> load、click⋯⋯ evenhandler ->onload、onclick⋯⋯ ``` 2. 事件分類 - 滑鼠 - mousedown - mousemove - mouseover -> 支援冒泡事件 - mouseout -> 支援冒泡事件 - mouseenter -> 沒有支援 - mouseleave -> 沒有支援 - mouseup - click - contextmenue - 鍵盤 - keydown - keyup - keypress - 瀏覽器 - resize - scroll - load - unload - beforeunload - copy - paste - cut - 表單事件 - submit - reset - focus - blur - change - input - select 3. 事件物件 - 屬性 - target - type - client X | Y - page X | Y - 方法 - preventDefault() >> 取消預設行為 - stopPropagation() >> 阻止冒泡事件 4. 阻止事件物件 > 只要有使用任何一個事件物件的屬性和方法，就要引用==事件物件「e」== ```javascript= form.onreset = function(e){ // 只要有使用任何一個事件物件的屬性和方法，就要引用事件物件 e.target e.type } ``` --- > 快捷鍵`option+上下鍵` -> 可以直接移動vscode中的code ```javascript= HTML5的Video標籤 // 如果你没有指定 controls 属性，那么视频不会展示浏览器自带的控件 <video controls="controls"></video> // poster屬性可以改變影片預覽圖 <video poster=""></video> ``` ```bash= 自製播放器 # 方法一 <video src="./movies/videoplayback.mp4" controls poster="../images/3ducks.png" width="640"></video> # 方法二(推薦 比較彈性) <video controls id=""> <source src="./movies/videoplayback.mp4"> <source src="./movies/123.mp4"> <source src="./movies/456.mp4"> <source src="./movies/789.mp4"> </video> ``` ```javascript= javascript語法 // 停止事件的默認動作 event.preventDefault() ``` drag & drop 拖曳放下事件 - dragstart - dragend - dragenter - dragover - drop 拖曳依訂有這兩個事件(!一定要建) - dragover - drop (!如果是拖曳功能記得要設定拖曳的範圍寬高！) 標籤沒有屬性值的話 可寫成=true ```bash= <video controls></video> # 寫成true .controls="true" ``` ```bash= # 沒有上傳檔案的那個按鈕的時候就要用 .dataTransfer 因為沒有input給他抓資料 let file = e.dataTransfer.files[0]; ``` 新增物件 1. 建立標籤 crearElement 2. 建立標籤屬性 標籤.src="..." 3. 找到父節點，append進去 .appendChild .insertBefore [節點選取語法.appendChild...](https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild) # Geolocation API [window.navigato](https://ithelp.ithome.com.tw/articles/10235746) Position.coords 是一個 Coordinates 物件的唯讀屬性，表示地理的特性：回傳的物件中包括位置、地球經緯度、海拔高度和速度，同時也包含著這些值的精準度訊息。 zoom 範圍 0~22 marker.set layer >>紅點點 control service >>路線規劃 ```javascript= function doFirst(){ navigator.geolocation.getCurrentPosition(succCB); } function succCB(e){ document.getElementById('position').innerHTML = ` 緯度：${e.coords.latitude} <br> 經度：${e.coords.longitude} <br> 準確度：${e.coords.accuracy} ` } window.addEventListener('load',doFirst) ``` --- 屬性或方法->駝峰式 local storage 儲存期間較長 session storage 儲存期間較短(關閉視窗就消失) ```javascript= for(let key in man){ // 印出key值 conse.log(key) // 印出value值 conse.log(man[key]) } ``` ==key是常數 要用陣列表示法`man[car]`== 物件表示法`man.car`