浏览器事件模型与jquery事件

 

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

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

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

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

 

<input type=”button” id=”btnTest” onclick=”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” onclick=”doSth();” /> <script type=”text/javascript”> $(“btnTest”).click(function(){Alert(“ok”);} ); </script>

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