從這一節開始，我們正式步入JavaScript各種事件的實操訓練了。JavaScript是基於事件模型的語言。JavaScript事件，這可是JavaScript的精髓所在，也是JavaScript入門教程學習中的重中之重。
在JavaScript中，常用的鼠標事件如下：
通常，事件處理器的命名原則是，在事件名稱前加上前綴on。例如，對於click事件，其處理器名為onclick。對於事件名稱，也是很好記憶的，顧名思義即可。
雙擊事件ondbclick很少用，就不在這裡啰嗦。下面我們這一節先來給大家講解一下JavaScript中比較實用的鼠標事件。
在JavaScript中，鼠標單擊事件是onclick。
單擊事件可謂JavaScript中最常用的事件了，在之前的學習中我們也接觸了不少，例如點擊某個按鈕彈出一個提示框。這裡大家一定要注意一點，單擊事件並不是只有按鈕才有，任何元素我們都可以為它添加單擊事件！
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#btn
{
display:inline-block;
width:80px;
height:24px;
line-height:24px;
text-align:center;
border-radius:3px;
background-color:rgba(69,184,35,1.0);
color:White;
cursor:pointer;
}
#btn:hover
{
background-color:rgba(69,184,35,0.8);
}
</style>
</head>
<body>
<div id="btn">調試代碼</div>
<script type="text/javascript">
var e = document.getElementById("btn");
e.onclick = function () {
alert("玩我麼？");
}
</script>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡使用div元素仿照 學習網的在線代碼測試工具，模擬一個動態按鈕，並且為div元素添加單擊事件onclick。當我們點擊“調試代碼”按鈕之後，會彈出提示框。
之所以設計這個例子，這也是給讀者說明一點：任何元素我們都可以為它添加單擊事件！
當然上面的CSS有些看不懂沒關系，裡面涉及的高級技術請關注CSS3教程，好東西俺同樣會給大家分享。
在JavaScript中，鼠標移入和移出事件分別是onmouseover和onmouseout。
其實， onmouseover和onmouseout這2個事件其實是好基友關系，平常都形影不離。這2個事件都是共同使用來分別控制鼠標“移入”和“移出”2種狀態的。例如，下拉菜單導航中，鼠標移入主導航時會顯示對應的二級下拉菜單，鼠標移出主導航時二級下拉菜單就會收起來。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#lvye
{
display:inline-block;
border:1px dashed black;
}
</style>
</head>
<body>
<h1 id="lvye"> 學習網</h1>
<script type="text/javascript">
var e = document.getElementById("lvye");
e.onmouseover = function () {
this.style.color = "red";
this.style.borderColor="red"
}
e.onmouseout = function () {
this.style.color = "black";
this.style.borderColor = "black"
}
</script>
</body>
</html>
在浏覽器預覽效果如下：
分析：
this.style.color = "black";
在這裡this指向的是e元素節點，也就是說這句代碼等價於：
e.style.color = "black";
關於this的使用比較復雜，我們這裡只是給初學者混個眼熟先。如果站長寫教程還沒累死的話，以後在JavaScript進階教程中我們再詳細給大家探討。
上面例子是在script標簽中編寫事件，當然同樣地我們也可以在元素內部屬性中編寫。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#lvye
{
display:inline-block;
border:1px dashed black;
}
</style>
</head>
<body>
<h1 id="lvye" onmouseover="this.style.color='red';this.style.borderColor='red';" onmouseout="this.style.color='black';this.style.borderColor='black';"> 學習網</h1>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這個例子跟第一個例子實際效果是一樣的，僅僅是調用方式不同，導致語法也略有不同。大家從中好好對比這兩種JavaScript調用事件方式的不同，並且理解一下this的用法，並且自己實踐一下。
上面例子雖簡單，但是已經交給大家方法了。大家可以根據onmouseover和onmouseout這2個事件來設計一下下拉菜單，考驗大家能力的時候到了。
在JavaScript中，鼠標的按下和松開事件分別是onmousedown和onmouseup。又一對好基友閃亮登場。
onmousedown表示鼠標按下的一瞬間所觸發的事件，而onmouseup表示鼠標松開的一瞬間所觸發的事件。當然我們都知道，只有“按下”才有“松開”這一說。說他倆整天搞基一點不為過。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="main">
<h1 id="lvye"> 學習網</h1>
<hr />
<input id="btn" type="button" value="button" />
</div>
<script type="text/javascript">
var btn = document.getElementById("btn");
var e = document.getElementById("lvye");
btn.onmousedown = function () {
e.style.color = "red";
}
btn.onmouseup = function () {
e.style.color = "black";
}
</script>
</body>
</html>
在浏覽器預覽效果如下：
分析：
在實際開發中，onmousedown和onmouseup這2個事件比較少用。