一般在撰寫事件有三種方式，第一種也是較為早期的一種，也是不推薦使用的方式，因為較容易受到外來的攻擊，關鍵是在 onclick=“hello();” 在這裡面可以撰寫 JS，所以也較容易受到外來的方式改寫程式碼，也是較為危險的方式
第一種
1
| <input type="button" class="btn" value="點擊" onclick="hello();">
|
第二種
直接把事件內容全寫在 JS 檔內，而不是 HTML 內
1
2
3
4
5
|
var el = document.querySelector('.btn');
el.onclick = function(){
alert('Hello');
}
|
第三種
採用addEventListener() 方法，俗稱事件監聽，來做事件的綁定
1
2
3
4
5
|
var el = document.querySelector('.btn');
el.addEventListener('click',function(){
alert('Hello');
})
|
比較彼此差異
撇除掉第一種較危險的方式之外，來談談第二種跟第三種的差異性
這兩個方法差異性在哪裡？假設我們今天同一個元素要綁定多個事件時：當採用第一種方法
1
2
3
4
5
6
7
8
9
10
|
<script>
var el = document.querySelector('.btn');
el.onclick = function(){
alert('Hello1');
}
el.onclick = function(){
alert('Hello2');
}
</script>
|
這時候只會彈跳 Hello2 出來，第一個 click 事件被蓋掉了，而使用另外一種方法時
1
2
3
4
5
6
7
8
9
10
11
12
|
<script>
var el = document.querySelector('.btn');
el.addEventListener('click',function(){
alert('Hello1');
}
})
el.addEventListener('click',function(){
alert('Hello2');
}
})
</script>
|
這時候會發現，會依序彈跳 Hello1 Hello2，事件會依序出來，並不會被蓋掉
上述就是其差異性，為了避免這種狀況，建議之後可以改用 .addEventListener()的方式
