首先看一下浏览器事件模型：

可见，浏览器在解析时候，要过两遍HTML，一次是从上而下，称为事件捕获；一次从下而上，称为事件冒泡（关于事件冒泡和事件捕获，这里就不详细说了）。

停止冒泡的方式：e.stopPropagation();

第一种事件模型，在html中直接绑定事件：

<input type=”button” id=”btnTest” οnclick=”doSth();” />
 
<script type=”text/javascript”>
Function doSth(){alert(“do it”);}
</script>

这种方式将行为和HTML混在了一起，没有实现行为与内容相分离。并且不能同时绑定多个事件。

第二种事件模型（直接给出jquery实现，js中为attachListener的方式）：

$(“#btnTest”).bind(“click”,function(){alert(“ok”)});
$(“#btnTest”).bind(“click”,function(){alert(“second event”)});

这种事件模型可以支持绑定多个事件，但写法不够简洁。

第三种模型(jquery实现)：

<input type=”button” id=”btnTest” οnclick=”doSth();” />
 
<script type=”text/javascript”>
 
$(“btnTest”).click(function(){
Alert(“ok”);
}
 
);
 
</script>

第三种事件模型是jquery提供的特定事件绑定，但是不支持绑定多个事件，如果想动态的绑定多个事件，还要用bind的方式，这种模型只是jquery提供的一个简便的方式，给一个事件名称，传给它一个function就可以了。