# [JavaScript] event事件 ###### tags: `JavaScript` Html產生按鈕後，js設定彈跳視窗顯示字幕 ![](https://i.imgur.com/4ABdtxx.png) function()代入任意字元，便可使用console追蹤按鈕點入詳情，同時在多種的事件語法中，可提供紀錄匯出資料，是很重要的紀錄功能。 ![](https://i.imgur.com/ibNaq7g.png) ### 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>`標籤內容 ![](https://i.imgur.com/8DdMe3W.png) ### e.target點擊連結，會顯示`<a>`標籤內容 ![](https://i.imgur.com/epp5J2p.png) *事件監聽addEventListener 相較於onclick語法顯示最新的click宣告，使用事件監聽則可呼叫所有的click需求 ![](https://i.imgur.com/U0vlski.png) 寫法addEventListener('click',function(),false) 使用監聽add-1及2都會彈出結果，則onlick只彈出add-2 false（預設）：指定元素往外面找，顯示box -> body true:從最外面找到指定元素，顯示body -> box ![](https://i.imgur.com/JnzNUGW.png) *終止冒泡事件stopPropagation * 在<body>及<class="box">都有宣告彈出視窗的情況下，點擊物件兩個宣告會依序出現，而使用此語法可終止出現第二層的動作，只做第一層的宣告。 * function（e）帶入事件監聽e，讓程式紀錄後暫停第二步的動作 ![](https://i.imgur.com/v2Aaxm9.png) *取消預設行為preventDefault 原先點擊link會跳轉到google官網，透過此語法能終止預設行為的發生 ![](https://i.imgur.com/3iFD4IK.png) 用法二 ![](https://i.imgur.com/IBr8VPJ.png) ## change表單內容的觸發 html語法 ![](https://i.imgur.com/2ZRj72v.png) js語法：第一步命名，這邊getElementById與最下方的監聽做對應，list用來匯入innerHTML做對應 ![](https://i.imgur.com/p1wcneq.png) ![](https://i.imgur.com/PpsGwEc.png) * 這邊的變數select為當下選擇的物件，target是選取到物件的值為何，ex：選擇前鎮區，值便會顯示前鎮區。 * 而str變數是為了組字串，迴圈組好後以字串呈現 * if迴圈的部分，如果select撈到相同地點的名稱(代名詞的概念) ，則顯示下列條件，str累加的方式將農夫名稱資料用li條列式呈現。 * list.innerHTML導入html語法，str向前呼應var str=""字串，這又與迴圈回傳得出的結果，便可出現農夫名稱的結果列表 ## keydown鍵盤觸發 點擊特定鍵盤按鍵，即可變更物件狀態，ex：發射火箭 html ![](https://i.imgur.com/muxnIO9.png) css 移動火箭的幅度調整速率 ![](https://i.imgur.com/na5BE8j.png) js 第一步：得知鍵盤對應代碼，可利用console log做查詢 ![](https://i.imgur.com/WWStfyU.png) ![](https://i.imgur.com/NtiIQsH.png) 第二步：使用switch語法做判斷式(指定答案推薦使用)，case後的數字為鍵盤代碼，下方新增指定項目querySelector，以style.bottom調整上升高度 ![](https://i.imgur.com/A5JpbPL.png) ## blur離開焦點時觸發事件 * 目的：空格處若無填寫任何數值，會跳出字樣提醒使用者填入資料 * var str = e.target.value;帶出指定位置的值(背) * 離開hamNumId指定位置後，便會呼叫blur的語法 ![](https://i.imgur.com/3LABhgB.png) 空欄顯示藍邊代表是在focus的狀態，點擊旁邊後無藍邊的狀態下便會呼叫blur並觸發指定動作。 ![](https://i.imgur.com/DDWPgwZ.png) ## mousemove滑鼠滑動到物件所觸發的事件 物件是Box，當使用此事件語法，觸碰到box便會彈跳出警告標語 ex：創建電棒遊戲，碰到就顯示你輸了。 ![](https://i.imgur.com/l370q9a.png) ## 網頁座標 ![](https://i.imgur.com/ODj0bJz.png) screen: 全版視窗內的座標 page: 內建設定的此頁長寬 client：既有的視窗大小內的座標位置 ## 事件監聽優化，從父元素監聽子元素 第一步：直接監聽list而非 list.li，若使用list.li只會抓到第一筆資料 第二步：target.nodeName為確認節點所使用，點擊便可顯示所在位置是li還是ul或a等等 第三步：如果監聽父元素點擊ul的範圍裡，點擊ul or li，只要在ul裡頭的元素都會被偵測到，因此需要寫判斷式告知系統若不是點擊到li就用return回傳空值。“LI需大寫” ![](https://i.imgur.com/xd7e7uj.png) 1. 宣告html的ID位置 * queryselector(指定多個不同位置) * getElementById(只指定一個) ``` document.queryselector('.box') ``` 2. 監聽addEventListener * 寫法說明：el.addEventListener('選擇事件',匿名function,false) * 選擇事件有：click(取代onclick)，mousemove，blur等等 範例：`el.addEventListener('mousemove',function(e){ alert('hello'); },false)` 3. 匯出值e.target.value;