事件1

##事件,事件流

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

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