イベントリスナを複数要素にまとめて登録する二つ方法

HTMLコード：

<div id=“link_area“>
    <a class=“bt“>1</a>
    <a class=“bt“>2</a>
    <a class=“bt“>3</a>
    <a class=“bt“>4</a>
    <a class=“bt“>5</a>
</div>

// クラス名で取得
const alinks = document.getElementsByClassName(‘a_link’);
for (let alink of alinks) {
    alink.addEventListener(‘click’,(e)=>{
        console.log(e.target.id);
        e.preventDefault();  //イベントのキャンセル
    })
}

//タグ名から取得
const atags = document.getElementsByTagName(‘a’);
[…atags].forEach(atag=>{
    atag.addEventListener(‘click’,(e)=>{
        console.log(e.target.id);
        e.preventDefault(); //イベントのキャンセル
    });
});

document.getElementById(“link_area”).onclick = function(ev) {
    console.log(ev.target.id);
    if (ev.target.tagName === ‘A’ && ev.target.id === ‘a4’) {
        alert(‘a4 clicked’);
    }
    ev.preventDefault();
}