很多DOM对象都有原生的事件支持，向div就有click、mouseover等事件，事件机制可以为类的设计带来很大的灵活性，相信.net程序员深有体会。随着web技术发展，使用JavaScript自定义对象愈发频繁，让自己创建的对象也有事件机制，通过事件对外通信，能够极大提高开发效率。
简单的事件需求
事件并不是可有可无，在某些需求下是必需的。以一个很简单的需求为例，在web开发中Dialog很常见，每个Dialog都有一个关闭按钮，按钮对应Dialog的关闭方法，代码看起来大概是这样
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css" >
.dialog
{
position:fixed;
width:300px;
height:300px; z-index:30;
top:50%; left:50%;
margin-top:-200px; margin-left:-200px;
box-shadow:2px 2px 4px #ccc;
background-color:#f1f1f1;
display:none;
}
.dialog .title
{
font-size:16px;
font-weight:bold;
color:#fff;
padding:4px;
background-color:#404040;
}
.dialog .close
{
width:20px;
height:20px;
margin:3px;
float:right;
cursor:pointer;
}
</style>
</head>
<body>
<inputtype="button" value="Dialog Test"/>
<divid="dlgTest">
<imgclass="close" alt="" src="https://www.jb51.net/images/close.png">
<divclass="title">Dialog</div>
<divclass="content">
</div>
</div>
<scripttype="text/javascript">
function Dialog(id){
this.id=id;
var that=this;
document.getElementById(id).children[0].onclick=function(){
that.close();
}
}
Dialog.prototype.show=function(){
var dlg=document.getElementById(this.id);
dlg.style.display='block';
dlg=null;
}
Dialog.prototype.close=function(){
var dlg=document.getElementById(this.id);
dlg.style.display='none';
dlg=null;
}
</script>
<scripttype="text/javascript">
function openDialog(){
var dlg=new Dialog('dlgTest');
dlg.show();
}
</script>
</body>
<html>