JavaScript基础知识-事件(2)

前面讲到三种事件绑定的方法，撇除掉第一种较危险的方式之外，来谈谈第二种跟第三种的差异性

以点击事件为例：

<input type="button" class="btn" value="点击">

<script>    var el = document.querySelector('.btn');    el.onclick = function(){        alert('Hello');    }</script>

<script>    var el = document.querySelector('.btn');    el.addEventListener('click',function(){        alert('Hello');    })</script>

究竟这两个方法差异性在哪里？假设我们今天同一个元素要绑定多个事件时：当採用第一种方法

<script>    var el = document.querySelector('.btn');    el.onclick = function(){        alert('Hello1');    }    el.onclick = function(){        alert('Hello2');    }</script>

这时候只会弹跳 Hello2 出来，第一个 click 事件被盖掉了，而使用另外一种方法时：

<script>    var el = document.querySelector('.btn');    el.addEventListener('click',function(){            alert('Hello1');        }    })    el.addEventListener('click',function(){            alert('Hello2');        }    })  </script>

这时候会发现，会依序弹跳 Hello1 Hello2，事件会依序出来，并不会被盖掉
上述就是其差异性，所以为了避免这种状况，我们可以试着改採用 .addEventListener()