事件1 | Liuyanling's blog

##事件，事件流

事件流：从页面接收事件的顺序。

IE及更早的版本不支持DOM事件流，IE不支持事件捕获，只支持事件冒泡。IE9、Opera、Firefox、Chrome和Safari都支持DOM事件流，支持DOM2级事件处理程序；IE的事件流叫事件冒泡。　　并非所有的事件都会经过冒泡阶段的,所有的事件都要经过捕捉阶段和目标阶段，但是有些事件会跳过冒泡阶段。例如，让元素获得输入焦点的focus事件以及失去输入焦点的blur事件就都不会冒泡。

事件冒泡：
　　如果为一个超链接添加了click事件监听器（事件处理函数），那么当该链接被点击时该事件处理函数就会被执行。但如果把该事件处理函数指派给了包含该链接的p元素或者位于DOM树顶端的document节点，那么点击该链接也同样会触发事件处理函数。这是因为事件不仅仅对触发的目标元素产生影响，它们还会对沿着DOM结构的所有元素产生影响。这就是大家所熟悉的事件转送。
　　当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件处理函数的节点，此时，该事件是onclick事件。
　　如click事件首先在div元素上发生，而这个元素就是我们单击的元素，然后，click事件沿DOM树向上传播，在每一级节点上都会发生，直至传播到document对象。如下：

<body>
<input type="button" value="Click Me" id="myBtn" />
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(event){
        alert("Clicked");
        event.stopPropagation();
    };

    document.body.onclick = function(event){
        alert("Body clicked");
    };
</script>
</body>

没有 event.stopPropagation()时，单击按钮会出现两个警告框。还有如下常用的实例代码：

EventUtil.addHandler(document.getElementById("display"),'click',function(event){
    var index = [].indexOf.call(event.target.parentNode.childNodes, event.target);
    data.splice(index, 1);
    event.target.parentNode.removeChild(event.target);
    render(data);
});
}

我们单击的是display的子元素，但事件绑定在display上，目测就是，单击实际目标元素，看下面的DOM事件流3阶段。但注意，我们的

var EventUtil = {
addHandler: function (element, type, handler) {
    if (element.addEventListener) {
        element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + type, handler);
    } else {
        element["on" + type] = handler;
    }
}
};

即对于DOM2级事件处理程序，我们的第三个参数已经定为false，即在冒泡阶段调用事件处理程序。改为true，就为捕获阶段调用。对于IE事件处理程序，支持此种程序的只有IE和Opera浏览器，而IE只支持事件冒泡，所以没有第三参数，所以attachEvent（）添加的事件处理程序都被添加到了冒泡阶段。

事件捕获：与冒泡相反。

DOM事件流：3阶段。事件捕获阶段，事件将沿着DOM树向下转送，直至目标节点。例如，若用户单击了一个超链接，则该单击事件将从document节点转送到html元素，body元素以及包含该链接的p元素。在此过程中，浏览器都会检测针对该事件的捕获事件处理函数，并且运行该事件处理函数。（也就是说，此阶段会执行那些第三参数设置成了true的DOM2级事件处理程序）处于目标阶段：浏览器在查找到已经指定给目标事件的事件处理函数之后，就会运行该事件处理函数。事件冒泡阶段事件将沿着DOM树向上转送，再次逐个访问目标元素的祖先节点到document节点。该过程中的每一步。浏览器都将检测那些不是捕获事件处理函数的事件处理函数，并执行它们。（也就是说，此阶段会执行那些第三参数设置成了true的DOM2级事件处理程序）。
参考文献2的实例对DOM文档流的理解挺直白的，只是作者讲的都是HTML文档对象的事件。

http://www.cnblogs.com/binyong/articles/1750263.html
http://www.cnblogs.com/niuniu/archive/2010/07/16/1778938.html