DOM事件模型和DOM事件流

一、DOM事件模型:包括捕获和冒泡(ie用的是事件冒泡),捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到window。是两个过程。

DOM事件模型和DOM事件流

—————————————————————————————————————————————————
 

DOM事件流:浏览器在为这个当前页面与用户做交互的过程中,比如我点击了这个鼠标左键,这个左键是怎么传到页面上。还有怎么响应的。事件流分三个阶段,第一阶段是捕获,第二阶段是目标阶段,比如点击的这个按钮,这个按钮就是目标阶段,事件通过捕获到达目标元素,就到达了目标阶段,第三个阶段是冒泡阶段,从目标元素再上传到window对象,就是冒泡的过程。

DOM事件模型和DOM事件流

—————————————————————————————————————————————————
三、描述DOM事件捕获的具体流程:捕获是从上到下,具体第一个真正接收的是window(对象)——第二个接收的是document(对象)——第三个接收的是html标签(怎么获取html标签>document.documentElement)——第四个接收的是body(document.body)——......(父级--子级,剩下的就是按照普通的html结构一层一层往下传)——最后到达目标元素。

DOM事件模型和DOM事件流

—————————————————————————————————————————————————
 

四、描述DOM事件冒泡的具体流程(与事件捕获正好相反):第一个接收的是目标元素——第二个接收的是...(子级--父级,按照html结构一层一层往上传)——然后接收的是body标签——html标签——document对象——最后一个接收的是window对象。

—————————————————————————————————————————————————

其他备注:

由于老版本的浏览器不太支持。所以建议大家放心的使用事件冒泡。在addEventListener中最后一个参数一般都是false,代表事件冒泡。

比较有意思的是在4.0的时候ie跟Netscape提出了两个完全相反的事件流,ie提出了事件冒泡流,Netscape提出了事件捕获流。

—————————————————————————————————————————————————

其他语言描述事件冒泡和事件捕获:

事件冒泡:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档对象)。

例子:

你点按钮的同时,浏览器会认为你同时也点击了包含这个按钮的容器div,你点击了div之后他会认为你同时也点击了body,你点击了body之后,他会认为你同时也点击了整个html,那么你点了整个html,他会认为你也点击了document文档。点击按钮会一级一级往上冒,直到window,我们把这个过程叫做事件冒泡。

事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。跟事件冒泡正好相反。

例子:

他认为最先接收事件的应该是window,然后接收的是document,然后是html,然后又让body接收了,然后又让div接收了,最后才被input按钮接收,我们把这个过程叫做事件冒泡。由于老版本的浏览器不太支持。所以建议大家放心的使用事件冒泡。新版本好多浏览器也都支持了事件捕获。

转自:http://blog.sina.com.cn/s/blog_c112a2980102xks8.html

猜你喜欢

转载自blog.csdn.net/ion_L/article/details/88372141