Js事件处理之“事件传播三个阶段”

一、三个阶段

根据事件流类型，可以把事件传播的整个过程分为3个阶段，依次为：

1. 事件捕获阶段
   先由文档的根节点document往事件触发对象，从外向内捕获事件对象
2. 目标阶段（目标对象本身的事件程序）
   到达目标事件位置，触发事件本身的程序内容；
3. 事件冒泡阶段¹
   再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。

二、事件传播过程

特点：从document对象开始，最后返回document对象结束。

本质上，事件首先向下遍历父元素，直到到达目标元素(捕获阶段)为止。
当事件到达目标时，它将在那儿触发(目标阶段)。
然后返回链上(冒泡阶段)，并一路调用处理程序

三、实例

目标元素是指触发事件的确切位置。

例如，如果您单击<div>中的<button> ，则相应的<button>标记将成为目标。 该元素可以作为event.target进行访问，并且在事件传播的整个阶段都不会更改。

蓝色箭头代表捕获过程，紫色箭头代表冒泡过程：

四、实例

示例: 点内层元素，也触发父元素上的事件处理函数:

<style type="text/css">
	div {/* 定义div元素样式 */
	    margin: 20px;			/* 边界距离 */
	    border: solid 1px blue; 	/* 蓝色边框线 */
	    font-size: 18px; 		/* 字体大小 */
	}
</style> 

<div class="div-1">div-1
    <div class="div-2">div-2
        <div class="div-3">div-3
            <div class="div-4">div-4
                <div class="div-5">div-5</div>
            </div>
        </div>
    </div>
</div>
<p id="show"></p>


<script>
    function bubble() {
        var div = document.getElementsByTagName('div');
        var show = document.getElementById("show");
        for (var i = 0; i < div.length; ++i) { 		//遍历div元素
            div[i].onclick = (function(i) { 		//为每个div元素注册鼠标单击事件处理函数
                return function() {			//返回闭包函数
                    div[i].style.border = '1px dashed red'; //定义当前元素的边框线为红色虚线
                    show.innerHTML += div[i].className + " > "; //标识每个div元素的响应顺序：div5>div4>div3>div2>div1
                }
            })(i);
        }
    }
    window.onload = bubble;
</script>

---

1. （1）所有现代浏览器都支持事件冒泡，但在具体实现中略有差别。IE5.5及更早版本中事件冒泡会跳过元素(从body直接跳到document)。IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。
   （2）IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。
   （3）、由于老版本浏览器不支持，很少有人使用事件捕获。建议使用事件冒泡。有特殊情况再使用捕获。 ↩︎