Javascript中的事件捕获、事件冒泡与事件委托

看以下简单的三层div结构。

<div id="grandparent">
    <div id="parent">
	<div id="child"></div>
    </div>
</div>

根据以上三层div嵌套结构，我来根据我的理解解释下什么叫事件捕获、事件冒泡、事件委托。

事件捕获：触发事件时，事件会从父元素到子元素先后响应。想象一下，你点击child元素时，是不是同时点击了parent和grandparent元素，那么他们都会响应你的点击事件，且响应的顺序是先父后子。

事件冒泡：事件冒泡和事件捕获恰巧相反，当你点击child时，事件的响应顺序是先子后父。

事件委托：事件委托应用了事件冒泡的原理，即当你想给child元素添加事件时，你可以将事件添加到parent甚至更高层的祖先元素上。

接下来你可能会想，既然事件冒泡和事件捕获是相反的两种事件处理机制，那么那种到底会生效呢？

所有现代浏览器都支持事件冒泡，事件捕获在一些较老的浏览器中不支持，所以你可以放心的使用事件冒泡，当然浏览器的默认机制也是事件冒泡。

既然事件会在文档树上冒泡或捕获，那如何控制它呢？比如现在我就想在点击child时，只有child响应事件。那么事件对象是你必须懂得的。

事件对象：在触发DOM上的某个事件时，会产生一个对象event，它保存着所有与事件相关的信息。事件对象的stopPropagation()方法可以取消事件的捕获或冒泡。例如：

<script>
    var obj = document.getElementById("child");
	obj.onclick = function(event){
	    event.stopPropagation();
    };
</script>

最后介绍下事件委托在什么情况下会用的比较多。

1.当你要给非常多的元素指定相同的事件处理程序时。比如你要给一个ul>li*50指定事件时，就可用事件委托，将事件委托给ul而不是直接指定到li上。

2.当页面是实时更新内容时。比如通过scroll事件动态加载图片时，由于新加载的文档内容不会响应事件（因为事件处理程序只会添加到在添加事件时已经存在的元素上）所以我们可以在指定事件时指定到包含图片的父元素上。