JavaScript 程式札記 : event 事件

什麼是 JavaScript 事件？

事件(event)就是網頁中發生的某些事情，例如當用戶點擊按鈕、移動滑鼠、輸入文字等，JavaScript 能夠偵測這些事件，並執行相對應的程式碼。

常見的 JavaScript 事件

以下是一些常見的 JavaScript 事件：

• click: 當用戶點擊元素時觸發。
• mousemove: 當滑鼠在元素上移動時觸發。
• keydown: 當用戶按下鍵盤上的按鍵時觸發。
• load: 當網頁完全載入時觸發。

除此之外還有很多事件，例如 : keyup, change, blur 等事件。

如何在 JavaScript 中處理事件？

要在 JavaScript 中處理事件，我們通常會使用 addEventListener 方法，這個方法允許你指定一個事件和一個函式，當該事件發生時，該函式就會被執行。

document.querySelector('button').addEventListener('click', function() {
    alert('你點擊了按鈕！');
});

在上面的範例程式中，先使用 document.querySelector('button') 選擇網頁上的按鈕，然後，使用 addEventListener 方法為這個按鈕添加一個點擊事件監聽器。當按鈕被點擊時，就會彈出一個提示框。

事件物件

當事件被觸發時，事件處理函式會接收到一個事件物件，這個物件包含了有關事件的詳細資訊，例如事件的類型、目標元素等。

document.querySelector('div').addEventListener('mousemove', function(event) {
    console.log('滑鼠位置：', event.clientX, event.clientY);
});

在上面的範例例程式中，事件處理函式接收到一個事件物件 event。這個物件有很多屬性，其中 clientX 和 clientY 分別代表滑鼠在網頁上的 x 和 y 位置。

阻止預設行為

有時候，可能會需要阻止事件的預設行為或事件傳播。例如，當用戶點擊一個連結時，你可能不想要瀏覽器真的跳轉到那個網址。

document.querySelector('a').addEventListener('click', function(event) {
    event.preventDefault();
    alert('連結被點擊，但不會跳轉！');
});

在上面的範例中，我們使用 event.preventDefault() 方法來阻止事件的預設行為。

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡