本節書摘來自異步社群《javascript入門經典（第6版）》一書中的第2章，第2.5節，作者：【美】 phil ballard 譯者：李 軍陳冀康，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
為頁面增加與使用者的互動是javascript的基本功能之一。為此，我們需要一些機制來檢測使用者和程式在特定時間在做什麼，比如滑鼠在浏覽器的什麼位置，使用者是否單擊了滑鼠或按了鍵盤按鍵，頁面是否完整加載到浏覽器，等等。
這些發生的事情，我們稱之為事件（event），javascript提供了多種工具來處理事件。第9章将詳細介紹事件和處理事件的進階技術，現在先來看看利用javascript檢測使用者滑鼠動作的一些方法。
javascript使用事件處理器（event handler）來處理事件，本章介紹其中的3個：onclick、onmouseover和onmouseout。
2.5.1 onclick事件處理器
onclick事件處理器幾乎可以用于頁面上任何可見的html元素。實作它的方式之一是給html元素添加一個屬性：
說明：雖然給html元素直接添加事件處理器是完全可行的，但現在人們已經不認為這是一種好的程式設計方式了。本書的第一部分仍然會使用這種方式，但後面的章節裡會介紹更強大、更靈活的方式來使用事件處理器。
先來看一個範例，如程式清單2.3所示。
程式清單2.3 使用onclick事件處理器
上述html代碼在頁面的body區域添加一個按鈕，并且設定了它的onclick屬性。給定onclick屬性的值，是一些javascript代碼，當單擊該html元素的時候（在這個例子中，就是按鈕），我們想要運作這些javascript代碼。當使用者單擊這個按鈕時，onclick事件被激活（通常稱為“被觸發”），然後屬性中所包含的javascript語句将會執行。
本例中隻有一條語句：
圖2.4是單擊這個按鈕得到的結果。
說明：也許有人注意到了，我們稱這個事件處理器為onclick，而在html元素裡添加它時卻使用小寫的onclick。這是因為html是不區分大小寫的，而xhtml是區分大小寫的，并且要求全部的html元素及屬性名稱都使用小寫字母。
2.5.2 onmouseover和onmouseout事件處理器
如果需要檢測滑鼠指針與特定頁面元素的位置關系，可以使用onmouseover和onmouseout事件處理器。
當滑鼠進入頁面上被某個元素所占據的區域時，會觸發onmouseover事件。而onmouserout事件，很顯然是在滑鼠離開這一區域時觸發的。
程式清單2.4展示了一個簡單的onmouseover事件處理過程。
程式清單2.4 使用onmouseover事件處理器
圖2.5展示了上述代碼的執行結果。如果把程式清單2.4中的onmouseover替換為onmouseout，就會在滑鼠離開圖像區域（而不是在進入）時觸發事件處理器，進而彈出警告對話框。
實踐
{實作圖像變化!} 利用onmouseover和onmouseout事件處理器可以在滑鼠位于圖像上方時，改變圖像的顯示方式。為此，當滑鼠進入圖像區域時，可以利用onmouseover改變元素的src屬性；而當滑鼠離開時，利用onmouseout再把這個屬性修改回來。代碼如程式清單2.5所示。
程式清單2.5 利用onmouseover和onmouseout實作圖像翻滾
上述代碼中出現了一些新文法，在onmouseover和onmouseout的javascript語句中，使用了關鍵字this。
當事件處理器是通過html元素的屬性添加到頁面時，this是指html元素本身。本例中就是“目前圖像”，this.src就是指這個圖像對象的src屬性（使用了我們已經介紹過的句點表示法）。
本例中使用了兩個圖像：tick.gif和tick2.gif。當然可以使用任何可用的圖像，但為了達到最佳效果，兩個圖像最好具有相同尺寸，而且檔案不要太大。
使用編輯軟體建立一個html檔案，包含程式清單2.5所示的代碼。可以根據實際情況修改圖像檔案的名稱，但要確定所使用的圖像和html檔案位于同一個目錄中。儲存html檔案并且在浏覽器裡打開它。
應該可以看到滑鼠指針進入時，圖像改變；當指針離開時，圖像恢複原樣，如圖2.6所示。
說明：這曾經是圖像翻滾的經典方式，而現在已經被更高效的“層疊樣式表”（css）取代了，但它仍不失為展示onmouseover和onmouseout事件處理器的後一種友善的方式。