js的事件模型

      JS的事件模型分为原始事件模型和标准事件模型，本人写文章仅对自己的学习笔记的记录，所以这两个模型我不阐述，今天重点要记录的是标准事件模型

      2级DOM标准对标准事件模型进行了标准化，虽然IE不支持这个模型。在标准事件模型中，增加了事件监听器这一概念，javascript权威指南对这个的描述是：2级DOM（标准事件模型）以一种独立于语言的方式编写，并且明确了事件监听器是对象而不是简单的函数。DOM的javascript绑定使用javascript函数句柄来取代了使用一个javascript对象的需求。事件监听器可以使用addEventListener()来调用句柄注册，就像他们是目标元素的方法一样，上面的这些描述其实还算容易懂，但是配合上事件传播，这个问题就开始复杂了。

      JS的时间传播分为捕捉，目标节点，气泡这三个阶段，意思是什么呢？假设一个DIV包含了一个INPUT按钮，当你为这个INPUT按钮注册了一个click的事件句柄，那么div的click同样能捕捉到这个方法（气泡），这些概念可以看书。假设如下程序：

     

      HTML的DOM有两个元素，分别是子节点和父节点，父节点包含子节点。

      document.getElementById("子节点").addEventListener("click",function(e){alert(e.currentTarget.id)},false)；

      如果这样为子节点注册了事件句柄，那么父节点必然也能处理这个click事件，点击后的alert出来的值是"父节点"的id。

 

      问题来了：开始我认为既然是为子节点注册的事件监听器，那么父节点是怎么处理这个事件的呢？又没有给父节点注册时间监听器。一直我不明白这个过程，后来想了想，是不是跟“事件监听器是对象而不是简单的函数”有关，既然是个对象，那么我首先为事件监听器对象注册了一个click的时间，然后通过addEventListener的最后个值来告诉文档那些那些dom元素对象去关联这个click监听器对象，但是function(e){alert(e.currentTarget.id)}这个方法的参数也是不同的，不同的dom元素的click事件传递给事件处理函数的e是不同的，通过上面的例子就看到e.currentTarget是当前的dom元素。那么是否是上面的dom元素对象去关联这个click监听器对象的时候把不同的e传递过去的。最后我的结论是dom元素对象去关联这个click监听器对象的过程应该是我点击dom元素对象首先判断是否有click监听事件，然后通过这个监听事件注册时候的信息判断这个dom元素是否相应这个事件，响应的话就把事件对象Event(也就是上面方法的e)通过参数传递过去。当然我这里只是臆测，没有什么文档依据，如果有大虾看到这篇文章的话可以指点一二关于这个事件模型。下面是我从w3school里面拷贝来的关于事件传播的描述：

事件传播

在 2 级 DOM 中，事件传播分为三个阶段：

第一，捕获阶段。事件从 Document 对象沿着文档树向下传递给目标节点。如果目标的任何一个先辈专门注册了捕获事件句柄，那么在事件传播过程中运行这些句柄。

第二个阶段发生在目标节点自身。直接注册砸目标上的适合的事件句柄将运行。这与 0 级事件模型提供的事件处理方法相似。

第三，起泡阶段。在此阶段，事件将从目标元素向上传播回或起泡回 Document 对象的文档层次。

http://www.w3school.com.cn/xmldom/prop_event_bubbles.asp