# [JavaScript] 宣告事件的三種方式

###### tags: `JavaScript`

一般在撰寫事件時，會有三種方式，第一種也是較為早期的一種，也是不推薦使用的方式，因為較容易受到外來的攻擊，關鍵是在 onclick="hello();" 在這裡面可以撰寫 JS，所以也較容易受到外來的方式改寫程式碼，也是較為危險的方式

 
 <input type="button" class="btn" value="點擊" onclick="hello();">

而第二種，這種方式是直接把我們的事件全部寫在 JS 檔內，而不是 HTML 內

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

而第三種，採用 .addEventListener() 這個方法，俗稱事件監聽，來做事件的綁定

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

### 比較後兩者差異

撇除掉第一種較危險的方式之外，來談談第二種跟第三種的差異性
究竟這兩個方法差異性在哪裡？假設我們今天同一個元素要綁定多個事件時：當採用第一種方法

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