先介绍绑定事件addEventListener的用法

//addEventListener（type, fn , true/false）
1、第一个参数是是事件类型，比如click, mouseover等
2、第二个参数是函数事件
3、第三个参数是true或者false,来判断是进行事件冒泡(false)还是进行事件捕获（true）

//事件冒泡和事件捕获
1、事件冒泡，事件从子节点开始执行，然后发展到父节点
2、事件捕获，事件从父节点开始执行，然后发展到子节点
3、事件捕获会先于事件冒泡执行

//代码示例
<ul id="ul">
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>

var ul = document.querySelector('#ul');  //捕获的是整个ul
ul.addEventListener('click' ,function () {
    alert('ul')
},false);

var li = document.querySelector('#ul > li');  //捕获第一个li
li.addEventListener('click' ,function () {
    alert('li')
},true)

上面的代码中，li是事件捕获，ul是事件冒泡，事件捕获会先于事件冒泡执行，因此先执行alert(li), 后执行alert(ul)