[day23] addEventListener監聽

2023 iThome 鐵人賽

DAY 23

Modern Web

html/css/js的各種操作系列第 23 篇

15th鐵人賽

oLunao

團隊NUTC_IMAC_WEB_桑貝比

2023-10-08 11:03:36

220 瀏覽

分享至

先來比較監聽與onclick

監聽是一個很好偵測使用者幹了些甚麼的功能，應該不少人會用監聽的方式來取代onclick的功能，那麼用監聽取代onclick有甚麼優點?

可維護性：用監聽的話會比較好維護，因為每個onclick都需要去對應一個函式，如果監聽有修整的好，那麼維護起來會比onclick輕鬆很多，且基本都只需要對javaScript操作就好。

可讀性：因為onclick需先在html設置好再去javaScript使用，一但多了就會挺亂的，使用監聽就不會這樣。

多事件處理：onclick對於多事件觸發相較於監聽時在差的很多。

同一事件的處理:如果有一個群組都要執行a功能，群組每個的onclick都必須寫a函式累積久了就會很長，但用監聽卻可以濃縮成小小一塊。

當然onclick也有優點，就是簡單直帥設置方便，在某些時候還是有點用就是了，但到後面建議還是要更改成監聽。

監聽的使用事項

可能會有人想說，如果按下某個鍵出錯後會不會導致整個監聽癱瘓?這點是不太需要擔心，因為每個事件的處理都是在自己函式之中，若真的出現這問題那就是重大錯誤才有可能，例如無限迴圈直接癱瘓網站。

再來可能會有人想，onclick不會無時無刻監聽網頁，那當網頁有幾百個按鈕那監聽不就也要用幾百個，那樣網頁處理起來不就很有可能會有效益問題?那這就要看你怎麼整理的了，確實會發生這種問題，但只要優化的好，監聽根本不會啟用到那麼多，在少量的情況下基本是不會有影響

優化示範:

<body>
        <div class="d-flex justify-content-center mt-5">
            <div class="d-flex flex-wrap justify-content-center border-1 border-secondary" style="width: 500px; height: 400px">
                <button class="btn d-block team1" type="button" id="button1">button1</button>
                <button class="btn d-block team2" type="button" id="button2">button2</button>
                <button class="btn d-block team1" type="button" id="button3">button3</button>
            </div>
        </div>
        <script>
            document.addEventListener("click", function (event) {
                console.log(event.target.id)
                console.log(event.target.classList.contains("team1"))
                if (event.target.classList.contains("team1")) {
                    const a = 1
                    a = 10
                }
            })
        </script>
    </body>

這裡示範了，把三個button整合成靠一個監聽讀取，並且還做了群組判斷，和演示報錯後是否還能繼續使用。

document是對整個網頁做監聽，這樣不論你點了甚麼都會反饋給你，就連沒有元件佔據的地方都會唷，如果你只想對例如header的區域做監聽，給你的header一個id，在id.addEventListener這樣就好囉。

class/id/等等.contains("team1")會對讀取的元件進行判斷可以試class又或是id，直接返還true/false。

語法

他的語法有三種

addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);

多數都是直接使用第一種模式啦(上面的示範就是)。
options，可以帶參數例如once(啟動一次後再也不啟動)或是capture/passive/signal等等。
useCapture，控制是在捕獲階段還是冒泡階段觸發。
甚麼是捕獲/冒泡?事件的傳播分為：捕獲階段、目標階段和冒泡階段，你可以把他想成波型圖，前緣觸發後緣觸發這樣。

監聽類型

監聽有很多種的模式，示範的就是click偵測，其他的還有鍵盤偵測，點兩下等等，下面舉例比較常使用的。
1.click：當鼠標單擊元素時觸發。
2.mousedown：當鼠標按下按鈕時觸發。
3.mouseup：當鼠標釋放按鈕時觸發。
4.mousemove：當鼠標移動時觸發。
5.mouseover：當鼠標移入元素時觸發。
6.mouseout：當鼠標移出元素時觸發。
7.keydown：當按下鍵盤上的按鍵時觸發。
8.keyup：當釋放鍵盤上的按鍵時觸發。
9.keypress：當在輸入元素上按下並釋放按鍵時觸發。
10.input：當輸入元素的值發生變化時觸發。
11.change：當表單元素的值發生變化時觸發（通常用於和等元素）。
12.submit：當表單提交時觸發。
13.focus：當元素獲得焦點時觸發。
14.blur：當元素失去焦點時觸發。
15.contextmenu：當右鍵單擊元素時觸發，顯示上下文菜單。
16.resize：當窗口大小調整時觸發。
17.scroll：當元素滾動時觸發(通常用於自定義滾輪)。