[JavaScript] event事件
Html產生按鈕後,js設定彈跳視窗顯示字幕
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
function()代入任意字元,便可使用console追蹤按鈕點入詳情,同時在多種的事件語法中,可提供紀錄匯出資料,是很重要的紀錄功能。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
e.target用法
簡述:觸發事件就我們的印象中是帶入參數,傳遞從html來的特定欄位值,然而在原生的JS寫法,時常利用function(e){}預設的e去取得被點擊區塊的詳細資訊,而常使用e.target取得內部元素資料
案例
詳述:當要刪除經由迴圈產生出的列表時,就可以使用e.target確認id編號,再經由迴圈比對編號知道序號index,再splice刪除。
https://codepen.io/vincer-chen/pen/wvWwPWZ?editors=1012
e.target點擊黑鈕,會出現<li>
標籤內容
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
e.target點擊連結,會顯示<a>
標籤內容
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
*事件監聽addEventListener
相較於onclick語法顯示最新的click宣告,使用事件監聽則可呼叫所有的click需求
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
寫法addEventListener('click',function(),false)
使用監聽add-1及2都會彈出結果,則onlick只彈出add-2
false(預設):指定元素往外面找,顯示box -> body
true:從最外面找到指定元素,顯示body -> box
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
*終止冒泡事件stopPropagation
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
*取消預設行為preventDefault
原先點擊link會跳轉到google官網,透過此語法能終止預設行為的發生
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
用法二
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
change表單內容的觸發
html語法
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
js語法:第一步命名,這邊getElementById與最下方的監聽做對應,list用來匯入innerHTML做對應
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 這邊的變數select為當下選擇的物件,target是選取到物件的值為何,ex:選擇前鎮區,值便會顯示前鎮區。
- 而str變數是為了組字串,迴圈組好後以字串呈現
- if迴圈的部分,如果select撈到相同地點的名稱(代名詞的概念)
,則顯示下列條件,str累加的方式將農夫名稱資料用li條列式呈現。
- list.innerHTML導入html語法,str向前呼應var str=""字串,這又與迴圈回傳得出的結果,便可出現農夫名稱的結果列表
keydown鍵盤觸發
點擊特定鍵盤按鍵,即可變更物件狀態,ex:發射火箭
html
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
css
移動火箭的幅度調整速率
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
js
第一步:得知鍵盤對應代碼,可利用console log做查詢
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
第二步:使用switch語法做判斷式(指定答案推薦使用),case後的數字為鍵盤代碼,下方新增指定項目querySelector,以style.bottom調整上升高度
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
blur離開焦點時觸發事件
- 目的:空格處若無填寫任何數值,會跳出字樣提醒使用者填入資料
- var str = e.target.value;帶出指定位置的值(背)
- 離開hamNumId指定位置後,便會呼叫blur的語法
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
空欄顯示藍邊代表是在focus的狀態,點擊旁邊後無藍邊的狀態下便會呼叫blur並觸發指定動作。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
mousemove滑鼠滑動到物件所觸發的事件
物件是Box,當使用此事件語法,觸碰到box便會彈跳出警告標語
ex:創建電棒遊戲,碰到就顯示你輸了。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
網頁座標
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
screen: 全版視窗內的座標
page: 內建設定的此頁長寬
client:既有的視窗大小內的座標位置
事件監聽優化,從父元素監聽子元素
第一步:直接監聽list而非 list.li,若使用list.li只會抓到第一筆資料
第二步:target.nodeName為確認節點所使用,點擊便可顯示所在位置是li還是ul或a等等
第三步:如果監聽父元素點擊ul的範圍裡,點擊ul or li,只要在ul裡頭的元素都會被偵測到,因此需要寫判斷式告知系統若不是點擊到li就用return回傳空值。“LI需大寫”
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 宣告html的ID位置
- queryselector(指定多個不同位置)
- getElementById(只指定一個)
document.queryselector('.box')
- 監聽addEventListener
- 寫法說明:el.addEventListener('選擇事件',匿名function,false)
- 選擇事件有:click(取代onclick),mousemove,blur等等
範例:el.addEventListener('mousemove',function(e){ alert('hello'); },false)
- 匯出值e.target.value;