JSでレンダリングした要素にaddEventListenerする方法

JSでレンダリングした要素にaddEventListenerする方法:

JQueryを使わず、JSでレンダリングした要素に対してイベントを付与する方法について調べた際のメモです。自分のような脱JQuery中のJS初学者向けです。　以下の例では「JSでレンダリングした要素にclickイベントを付与する」　ケースを想定しています。

idを起点にイベントを付与

document.addEventListener('click', (e) => { 
    if (e.target.id === 'id名')) { 
        //　イベント発生時に生じさせたい処理  
    } 
}) 
 

classを起点にイベントを付与

document.addEventListener('click', (e) => { 
    if (e.target.classList.contains('クラス名')) { 
        //　イベント発生時に生じさせたい処理  
    } 
}) 
 

やっていること

ざっくり言うと、

何かしらがクリックされたら、それが処理を行いたい要素なのかをチェックする

ということを行なっています。e.targetにはクリックされた要素が入っていますので、その要素が目的とするclassやidを持っているのかを判断して条件分岐させています。