【Day24】從零開始的程式大亂鬥：JavaScript－Event Listener

2023 iThome 鐵人賽

DAY 18

自我挑戰組

那些有趣的程式系列第 24 篇

15th鐵人賽

dcheng0915

2023-10-10 22:11:13

150 瀏覽

分享至

今天要介紹的是 JavaScript 中的事件監聽 Event Listener 。

什麼是事件監聽 Event Listener ?

事件監聽 Event Listener 如同它的名稱一樣，是用來監聽／偵測某個事件觸發，比如：

點擊元素
按下滑鼠按鈕
按下鍵盤的按鍵
畫面加載完成
畫面上下滾動

怎麼使用事件監聽 Event Listener ?

選擇元素
在元素上添加事件監聽
添加觸發後要執行的函式

Example：

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript－Event Listener</title>
    </head>
    <body>
        <div class="content">content</div>
        <script>
            const content = document.querySelector('.content');
            content.addEventListener('click', function() {
                console.log('click');
            });
        </script>
    </body>
</html>

點擊 <div class="content">content</div> 的輸出結果：