2013-10-12

DOM事件探秘(一)

前言

Click、touch、load、drag、change、input、error、risize — 这些都是冗长的DOM（文档对象模型）事件列表的一部分。事件可以在文档(Document)结构的任何部分被触发，触发者可以是用户操作，也可以是浏览器本身。事件并不是只是在一处被触发和终止；他们在整个document中流动，拥有它们自己的生命周期。而这个生命周期让DOM事件有更多的用途和可扩展性。
作为一个开发人员，我们必须要理解DOM事件是如何工作的，然后才能更好的驾驭它，利用它们潜在的优势，开发出更高交互性的参与体验。
本章节目标就是帮助大家快速的清楚的认识DOM事件的内在工作机制和基本使用方式，以及如何用这些机制来解决工作中遇到的常见问题。

一、事件流

事件流就是描述了页面中接受事件的顺序，在浏览器发展的初期，两大浏览器厂商IE和Netscape互掐，出现了一个坑爹的情况，那就是他们对事件流的解释出现了两中截然相反的定义。也就是我们所熟悉的：IE的事件冒泡，Netscape的事件捕获。
DOM事件触发过程

当一个DOM事件被触发的时候，它并不只是在它的起源对象上触发一次，而是会经历三个不同的阶段。简而言之：事件一开始从文档的根节点流向目标对象（捕获阶段），然后在目标对向上被触发（目标阶段），之后再回溯到文档的根节点（冒泡阶段）

事件流描述的是从页面中接受事件的顺序。
IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流

1.事件冒泡：即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(文档)。就是当点击text部分时，先由text处的元素接收，然后逐级传播至window，即执行5-6-7-8的过程

2.事件捕获：事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。同理，在上面的模型中，就是点击text部分时，先由window接收，然后逐级传播至text元素，即执行1-2-3-4-5的过程。

#####事件冒泡和事件捕获的流程与区别
下面用代码来说明下事件冒泡和事件捕获的流程，同时也让大家能看出二者的区别：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡和事件捕获的流程与区别</title>
    <style type="text/css">
        #p{width:400px;height:200px;border:1px solid #c5c5c5; text-align:center;}
        #c{margin: 30px 100px 0; width:200px;height:100px;border:1px solid red;text-align:center;}
    </style>
</head>
<body>
   <div id="p">
       父节点
       <div id="c">子节点</div>
   </div>
   <script type="text/javascript"> 
    var p = document.getElementById('p');
    var c = document.getElementById('c');
     c.addEventListener('click', function () {
           alert('子节点捕获')
  　　      }, true);
     c.addEventListener('click', function () {
           alert('子节点冒泡')
      }, false);
    p.addEventListener('click', function () {
            alert('父节点捕获')
        }, true);
      p.addEventListener('click', function () {
          alert('父节点冒泡')
       }, false);
    </script>
</body>
</html>

相关文章:
1.理解事件流
 2.使用事件处理程序
 3.Event对象

本文标题:DOM事件探秘(一)

文章作者:Hank

发布时间:2013-10-12, 16:28:00

最后更新:2017-03-12, 21:09:34

原始链接:http://huangjihua.com.cn/2013/10/12/DOM事件探秘/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。