事件传递机制：
例如鼠标被按下后，mousedown事件被触发。
事件先从document->ancestor element->...->parent->event.target(在此元素上按下的鼠标)->parent->...->ancestor element->document.
事件走了一个循环，从documet到event.target再回到document，从event.target到document的过程叫做冒泡。
event.stopPropagation(); // 事件停止冒泡到，即不让事件再向上传递到document，但是此事件的默认行为仍然被执行，如点击一个链接，调用了event.stopPropagation()，链接仍然会被打开。
event.preventDefault(); // 取消了事件的默认行为，如点击一个链接，链接不会被打开，但是此事件仍然会传递给更上一层的先辈元素。
在事件处理函数中使用 return false; 相当于同时调用了event.stopPropagation()和event.preventDefault()，事件的默认行为不会被执行，事件也不会冒泡向上传递。
新的添加事件机制使用el.addEventListener('click', function(event){}, false);
第三个参数是true或者false，一般都是使用false. 这个bool变量指示事件是使用capture还是bubble方式来处理。true表示使用捕捉方式，false使用冒泡方式，大多数情况下也是使用冒泡方式。
<div>
<a href="http://www.apple.com">Navigate to Apple</a>
</div>
如上两个元素div和a，a是div的孩子元素，他们都使用了addEventListener注册了click事件。
<body>
<div id="myDiv">
<a href="http://www.apple.com" id="apple">Go to Apple</a>
</div>
</body>
document.getElementById("myDiv").addEventListener("click", function(event) {
console.log("click on div");
}, false);
document.getElementById("apple").addEventListener("click", function(event) {
event.preventDefault();
console.log("click on a");
}, false);
如果在myDiv上的第三个参数使用false, 则点击链接后链接的click事件函数先执行，再执行myDiv的click事件处理函数。而如果使用的是true，则使用捕捉方式，所以myDiv的click事件处理函数先执行。