在网页访问中常见的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>