事件
JS中的事件说白了就是在获取的页面元素上绑定触发和响应的机制。
事件三要素
普通的事件绑定
<script>
var box = document.getElementById('box');
box.onclick = function () {
console.log('代码会在box被点击后执行');
}
</script>事件监听
<script>
var box = document.getElementById('box');
box.addEventListener('click', function () {
console.log('代码会在box被点击后执行');
})
</script>上面这两种写法基本实现效果都差不多，那他们到底有什么区别呢？今天我们就来探究一下他们到底有什么区别？
首先，我们在普通事件绑定点击事件后，再绑定一个点击事件。让我们来看看效果
<script>
var box = document.getElementById('box');
box.onclick = function () {
console.log('代码会在box被点击后执行');
};
box.onclick = function () {
console.log('代码会在box第二次被点击后执行');
};
</script>
可以看到，同样的普通事件绑定，下面的事件会覆盖上面的。那让我们看看事件监听会有什么效果吧！
<script>
var box = document.getElementById('box');
box.addEventListener('click', function () {
console.log('代码会在box被点击后执行');
})
var box = document.getElementById('box');
box.addEventListener('click', function () {
console.log('代码会在box第二次被点击后执行');
})
</script>
可以看到，事件监听下面的不会覆盖上面的事件。其实事件监听中可以填三个参数，第一个参数代表事件，第二个参数是回调函数。第三个参数就是事件的捕获与冒泡， 为true时捕获，false时冒泡。默认为false。
普通事件只能执行一个回调，而事件监听可以执行无数个回调！
并且事件监听，在动态生成元素时也生效，而普通事件不行。
值得一提的是，事件监听不支持低版本浏览器(IE浏览器)；
聊完区别，我们再来看看事件的冒泡阶段和捕获阶段！
上面的代码执行后，点击孙子的粉色方块后，事件逐渐像把石头扔进水里之后一样，逐渐向外向父元素发散，先输出孙子，再输出儿子，再输出爸爸。所谓冒泡就是从dom树的最下面往上面一层层的执行事件。
如果我们将事件监听的第三个参数设置成true呢，我们再来看看会输出什么结果呢？
可以看到，把第三个参数改为true后，事件在捕获阶段就触发了，所以同样点击粉色方块，事件是从外层往里面顺序执行的。所谓捕获就是从dom树的最上面往下面一层层的执行事件。
总的来说普通事件和事件监听的区别就是：
普通添加事件的方法不支持添加多个事件,最下面的会覆盖上面的 事件无法取消
而事件监听方式添加事件可以添加多个事件, 支持事件冒泡 事件捕获 但是不兼容低版本IE浏览器！
