1、DOM第0级事件模型，看下面的例子，关于DOM第0级事件模型，有几点要说明，例子列举了两个事件方式。第11行，在就绪处理程序里面定义onmouseover事件处理程序，把元素的属性onmouseover设置成为一匿名函数的实例。第19行，通过特性标记来声明处理程序，是以特性的值作为函数体来自动创建匿名函数，最后一个特性标记等效为imageElement.onclick=function(event){say('aaaaaaaaaaabbbbbbbbbbbbbb');}标红色为特性的属性值。名为event的类实例，作为第一个参数传递到处理程序。为了解决IE和别的浏览器的兼容性问题，有下两行代码：
if(!event) event=windows.event;
var target=(event.target)?event.target:event.srcElement;
windows.event和event.srcElement都是IE的特性。如果目标元素的父元素也有同类型事件的处理程序，则也调用父元素的处理程序，直到DOM树的项部。可以调用event实例的stopPropagation(),或者是IE中，将Event实例的cancelBubble属性设置为true,停止向上传播。
1 <title>无标题文档</title>
2
3 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
4
5 <script type="text/javascript">
6 function say(text){
7 $("#console").append("<div>"+ new Date()+ text +"</div>");
8 }
9
10 $(function(){
11 $("#ab")[0].onmouseover=function(event){say("cccccccccccccccccccccc");};
12 });
13
14 </script>
15
16 </head>
17
18 <body>
19 <img id="ab" src="images/IMG_20120401_122629.jpg" width="359" height="230" onclick="say('aaaaaaaaaaabbbbbbbbbbbbbb');" />
20 <div id="console"></div>
21 </body>
22 </html>
2、DOM第2级事件模型
这是浏览器DOM第2级事件模型的声明方式。第12，13，14行，其中最后一个参数如果为false，则建立冒泡型处理程序。为true,则为捕获型处理程序。
1 <title>无标题文档</title>
2
3 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
4
5 <script type="text/javascript">
6 function say(text){
7 $("#console").append("<div>"+ new Date()+ text +"</div>");
8 }
9
10 $(function(){
11 var element=$("#ab")[0];
12 element.addEventListener('click',function(event){say('once');},false);
13 element.addEventListener('click',function(event){say('twice');},false);
14 element.addEventListener('click',function(event){say('three times');},false);
15 });
16
17
18
19 </script>
20
21 </head>
22
23 <body>
24 <img id="ab" src="images/IMG_20120401_122629.jpg" width="359" height="230"/>
25 <div id="console"></div>
26 </body>
27 </html>
3、IE的事件模型
attachEvent(eventName,handler),eventName如onclick,onmouseover等等，handler为处理程序的函数，其传播方式为，Event实例的cancelBubble属性设置为true,停止向上传播
4、jQuery的事件模型，
绑定事件处理程序，其它写法如12行，13行，
删除事件处理程序，其中eventType为字符串，listener为函数，event为事件，
unbind(eventType,listener)
unbind(event)
触发事件
trigger(eventType)
enentName()
另有两特有的事件，
toggle(listenerOdd,listenerEven)
hover(overListener,outListener)
1 <title>无标题文档</title>
2
3 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
4
5 <script type="text/javascript">
6 function say(text){
7 $("#console").append("<div>"+ new Date()+ text +"</div>");
8 }
9
10 $(function(){
11 $("#ab").bind("click",function(){say("once");});
12 $("#ab").bind("click",function(){say("twice");});
13 $("#ab").click(function(){say("three times");});
14 });
15
16
17
18 </script>
19
20 </head>
21
22 <body>
23 <img id="ab" src="images/IMG_20120401_122629.jpg" width="359" height="230"/>
24 <div id="console"></div>
25 </body>
26 </html>