綁定事件的語法差異

Posted on In

.onclick 跟 .addEventListener 的差異在哪裡呢？

.onclick跟.addEventListener的差異

在同一個元素上，

❌ .onclick「不能同時」綁定多個事件

✅ .addEventListener「可以同時」綁定多個事件

請看以下範例說明

html:
現在有兩個按鈕，分別會示範使用.onclick和.addEventListener來綁定事件

1
2
<input type="button" class="btnOn" value="on點擊">
<input type="button" class="btnAdd" value="add點擊">

用.onclick綁定事件

html:

1
<input type="button" class="btnOn" value="on點擊">

JS:
🎃 建立變數elOn，並選取.btnOn

🎃 用.onclick綁定事件

1
2
3
4
5
var elOn = document.querySelector('.btnOn');

elOn.onclick = function(){
    alert('hello');
}

點擊「on點擊」，確實會跳出 alert

.onclick「不能同時」綁定多個事件

當我想要「連續綁定兩個事件」

JS:

1
2
3
4
5
6
7
8
9
10
// 用.onclick綁定事件
var elOn = document.querySelector('.btnOn');

elOn.onclick = function(){
    alert('on-1');
};

elOn.onclick = function () {
    alert('on-2');
};

😢 點擊「on點擊」按鈕會發現，只會出現「on-2」的 alert，但我明明就綁定了兩個.onclick事件呀

原因為：

這是.onclick的侷限–>

🎃 當我針對同一個元素，同時綁定了很多個.onclick事件，.onclick永遠都只會讀取「最後一個事件」，前面的事件都會「被覆蓋掉」

✅ 為了解決.onclick的侷限，就有了一個更好的作法「.addEventListener」

用.addEventListener綁定事件

html:

1
<input type="button" class="btnAdd" value="add點擊">

JS:

🎃 用.addEventListener連續綁定兩個事件

1
2
3
4
5
6
7
8
9
10
// 用.addEventListener綁定事件
var elAdd = document.querySelector('.btnAdd');

elAdd.addEventListener('click',function(){
    alert('add-1');
},false);

elAdd.addEventListener('click', function () {
    alert('add-2');
}, false);

✅ 就會接續跳出「第一個 alert」和「第二個 alert」了


🎃 在同一個元素上，.addEventListener「可以同時」綁定多個事件