Try   HackMD

[JavaScript] event事件

tags: JavaScript

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

  • <body>及<class="box">都有宣告彈出視窗的情況下,點擊物件兩個宣告會依序出現,而使用此語法可終止出現第二層的動作,只做第一層的宣告。

  • function(e)帶入事件監聽e,讓程式紀錄後暫停第二步的動作

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 →

  1. 宣告html的ID位置
  • queryselector(指定多個不同位置)
  • getElementById(只指定一個)
document.queryselector('.box')
  1. 監聽addEventListener
  • 寫法說明:el.addEventListener('選擇事件',匿名function,false)
  • 選擇事件有:click(取代onclick),mousemove,blur等等
    範例:el.addEventListener('mousemove',function(e){ alert('hello'); },false)
  1. 匯出值e.target.value;