[想試試看JavaScript ] 為什麼需要這麼多種註冊事件處理的方式

13th鐵人賽

夯特

2021-09-18 10:39:12

555 瀏覽

為什麼需要這麼多種註冊事件處理的方式?

上一篇提到註冊事件的方式有三種
1.HTML 屬性
2.DOM 屬性
3.addEventListener()

那這三種有什麼差異呢?

主要的差異是越後面的寫法其實寫起來越長越複雜

既然寫起來比較複雜，為什麼會用比較複雜的寫法呢?

當網站比較複雜，就會採用 DOM 屬性與 addEventListener 的寫法
我們寫網站時，不只會希望寫出功能，也希望在修改的時候會很方便。
所以為了閱讀的方便，會習慣將 HTML 與 Javascript 分開來寫，HTML 只負責放資料，Javascript 負責處理資料與製作功能。
使用 HTML 屬性的寫法會將資料與功能都寫在一起閱讀起來很不方便。

不過實際上寫網站也比較少用 DOM 屬性的寫法，為什麼呢?
因為 HTML 屬性與 DOM 屬性的寫法，同樣的事件，註冊事件只能註冊一次如果重複註冊事件就會也只會註冊一次。
可以試一下下面的程式碼，可以發現只有 addEventListener 可以重複註冊 click 事件

<html>
<head>
<script>

</script>
</head>
<body>
    <button id="btn" onclick="alert('click1');" onclick="alert('click2';)">Click</button>
<script>
var btn=document.getElementById("btn"); // 得到 button 標籤放進變數 btn 裡
btn.onclick=function(){
    alert('onclick1');
};
btn.onclick=function(){alert('onclick2')};
btn.addEventListener('click',function(){alert('adclick1')});
btn.addEventListener('click',function(){alert('adclick2')});
</script>
</body>
</html>