on事件和addEventListener事件区别？事件捕获和冒

on事件

js可以对一些页面的事件设定定触发值。例如常用的点击onclick，鼠标移动onmouseover或者移动端屏幕点击ontouchover，等。
但是对同一个元素绑定相同的事件，只会执行最后一个，因为会覆盖。

<div id="div1" style="height:200px;background:#0cc">
Click me
</div>

<script>
   var dib1 = document.getElementById("div1");
   div1.onclick = function(){
    alert("message1");
   };
  div1.onclick = function(){
    alert("message2");
  }
</script>

上面只会打印出message2

但是对于addeventListener来讲，能可以多次绑定事件。

<script>
    var dib1 = document.getElementById("div1");
    div1.addEventListener('click', function(){
        alert("message1");
    });
    div1.addEventListener('click', function(){
        alert("message2");
    });
</script>

上面的代码会打印出message1，message2

事件捕获和事件冒泡

<div id="parent1">
    <div id="child1" style="height:200px;background:#0cc">
    冒泡
    </div>
</div>
<div id="parent2">
    <div id="child2" style="height:200px;background:#0cc">
    捕获
    </div>
</div>

<script>
    var parent1 = document.getElementById("parent1");
    var child2 = document.getElementById("child1");
    var parent2 = document.getElementById("parent2");
    var child2 = document.getElementById("child2");
    parent1.addEventListener('click', function(){
        alert("this is parent element");
    });
    child1.addEventListener('click', function(){
        alert("this is child element");
    });
    parent2.addEventListener('click', function(){
        alert("this is parent element");
    }, true);
    child2.addEventListener('click', function(){
        alert("this is child element");
    }, true);
</script>

上面点击parent1的时候，会输出child1，parent1
点击下面的parent2的时候，会输出parent2，child2。
第三个参数为true表示事件捕获，不写或者写上false的时候表示事件冒泡。