在網頁訪問中常見的JavaScript事件大體可以分爲：鼠標事件、瀏覽器事件、鍵盤事件。
JavaScript事件定義了用戶與網頁進行交互時產生的各種操作。例如，當用戶單擊一個超鏈接或按鈕時，就會觸發一個事件,告訴瀏覽器發生了需要進行處理的操作。除了在用戶操作的過程中可以產生事件外，瀏覽器自身的一些動作也可能產生事件。
在JavaScript程序中可以定義一個事件的處理函數，當觸發事件時會調用處理函數。
鼠標事件的使用範圍：單擊按鈕、選中複選框checkbox、單選按鈕radio，會用到onclick或click事件； 若是鼠標移入、移出，會用到onmouseover和onmouseout。
定義HTML元素時，可以使用on+事件名來指定事件處理函數，若有事件的綁定會應用到，例如 鼠標點擊事件，在IE中，是 onclick ， 但在 非IE中，則是 click。使用if和else條件判斷語句， 就會解決這個事件在瀏覽器的兼容性問題。
javascript 常見事件的 效果舉例：
1、JS 實現下拉菜單的顯示隱藏（用到 onmouseover和onmouseout）
js實現下拉菜單的顯示隱藏 代碼如下：
效果圖：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
body{padding: 100px;}
.one{height: 40px;width: 100px;line-height: 40px;float: left;text-align: center;margin-right: 2px;background: #d8d8d8;}
.one:hover{cursor: pointer;}
.two{width: 100px;display: none;}
.one:hover .two{display: block;}
.two li:hover{background: gray;}
</style>
</head>
<body>
<ul>
<li class="one">一級菜單</li>
<li class="one" onmouseover="document.getElementById('list').style.display='block'" onmouseout="document.getElementById('list').style.display='none'">一級菜單
<ul id="list" class="two">
<li>二級菜單</li>
<li>二級菜單</li>
<li>二級菜單</li>
</ul>
</li>
<li class="one">一級菜單</li>
</ul>
</body>
</html>2、JS 實現點擊按鈕圖片的放大縮小
用CSS+JS 在行內式實現效果的方法：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
#box{
width:200px;
height:200px;
background-color:#66C;}
</style>
</head>
<body>
<input type="button" class="btn1" value="放大" onclick="document.getElementById('box').style.width='400px';document.getElementById('box').style.height='400px';" />
<input type="button" class="btn1" value="縮小" onclick="document.getElementById('box').style.width='100px';document.getElementById('box').style.height='100px';" />
<div id="box"></div>
</body>
</html>上面的 行內式的觸發事件， 可以 改用 嵌入式 來寫，引入函數的定義和調用：
函數：就是具備一定功能的代碼段。聲明函數 如果不調用 函數是不起作用的。
改用 嵌入式 後的 代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片的放大縮小</title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background: #777;
-webkit-transition: all 1s linear;
}
</style>
<script type="text/javascript">
function big(){
var da=document.getElementById('box');
da.style.width='400px';
da.style.height='400px';
}
function small(){
var mini=document.getElementById('box');
mini.style.width='100px';
mini.style.height='100px';
}
</script>
</head>
<body>
<input type="button" name="" id="" value="放大" onclick="big()"/>
<input type="button" name="" id="" value="縮小" onclick="small()"/>
<div id="box"></div>
</body>
</html>