前面講到三種事件綁定的方法，撇除掉第一種較危險的方式之外，來談談第二種跟第三種的差異性

以點擊事件為例：

<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()