JavaScript中的两种事件流
CindySmyth
7年前
<h2>JavaScript中的两种事件流</h2> <p>事件流描述的是从页面中接收事件的顺序。提出事件流概念的正是IE和Netscape，但是前者提出的是我们常用的事件冒泡流，而后者提出的是事件捕获流。</p> <h2>第一部分：事件冒泡</h2> <p>即事件开始由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。</p> <p>下面举一个简单的例子：</p> <pre> <code class="language-javascript"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bubble</title> <style> button{ background: red; color:white; } #third{ width: 50px; height: 50px; border:thin solid red; } #second{ width: 100px; height: 100px; border:thin solid red; } #first{ width:200px; height: 200px; border:thin solid red; } </style> </head> <body> <div id="first"> <div id="second" > <div id="third" > <button id="button">事件冒泡</button> </div> </div> </div> <script> document.getElementById("button").addEventListener("click",function(){ alert("button"); },false); document.getElementById("third").addEventListener("click",function(){ alert("third"); },false); document.getElementById("second").addEventListener("click",function(){ alert("second"); },false); document.getElementById("first").addEventListener("click",function(){ alert("first"); },false); </script> </body> </html> </code></pre> <p>这时，我们 <strong>只点击button</strong> 元素，效果如下：</p> <p><img src="https://simg.open-open.com/show/9eddde1ba96523c0a47667b9add3891d.gif"></p> <p>可以看到，虽然我们只点击了button元素，但是，button外的third、second、first上的事件由内向外以此被触发，触发的顺序是由DOM树的下层到DOM树的最上面，故称为冒泡。</p> <p>（说明：尽管这里我使用了DOM2级事件处理程序，并设置每个事件为冒泡阶段发生，但是即使使用DOM0级，得到的结果也是这样的，冒泡是默认的）</p> <p>注意：现代所有的浏览器都支持事件冒泡，只是在实现上有一些差别。</p> <h2>第二部分：事件捕获</h2> <p>事件捕获和事件冒泡是刚好相反的，事件捕获是指不太具体的节点应该更早的接收到事件，而最具体的节点应该最后接收到事件。举例如下所示：</p> <pre> <code class="language-javascript"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bubble</title> <style> button{ background: red; color:white; } #third{ width: 50px; height: 50px; border:thin solid red; } #second{ width: 100px; height: 100px; border:thin solid red; } #first{ width:200px; height: 200px; border:thin solid red; } </style> </head> <body> <div id="first"> <div id="second" > <div id="third" > <button id="button">事件冒泡</button> </div> </div> </div> <script> document.getElementById("button").addEventListener("click",function(){ alert("button"); },true); document.getElementById("third").addEventListener("click",function(){ alert("third"); },true); document.getElementById("second").addEventListener("click",function(){ alert("second"); },true); document.getElementById("first").addEventListener("click",function(){ alert("first"); },true); </script> </body> </html> </code></pre> <p>大家可以看到这个例子我只是把addEventListener()方法的第三个参数由前面例子的false修改为了true,也就是使用捕获方式获得button，那么结果如下：</p> <p><img src="https://simg.open-open.com/show/a92e6f1eb7ed8a2f7b4a56dc7a9c82bd.gif"></p> <p>我们可以看到最外层的事件先被触发，最后才是我们点击的button事件被触发，这便是事件捕获。</p> <p>注意：尽管这是Netscape Navigator提出的事件流，但是现在所有的浏览器都支持这种事件流模型。 但是由于老的浏览器不支持，所以很少有人使用事件捕获。</p> <h2>第三部分：DOM事件流</h2> <p>DOM2级事件规定的时间流包括 三个阶段：</p> <ul> <li>事件捕获阶段</li> <li>处于目标阶段</li> <li>事件冒泡阶段</li> </ul> <p>注意：在DOM事件流中，实际的目标在捕获阶段不会接收到事件，下一个阶段是处于目标阶段，这时事件被触发，最后进入事件冒泡阶段。我们认为 <strong>处于目标阶段是事件冒泡阶段的一部分。</strong></p> <p> </p> <p>来自：http://www.cnblogs.com/zhuzhenwei918/p/6139880.html</p> <p> </p>