More than 5 years have passed since last update.

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

Posted at 2019-01-07

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

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


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


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

ざっくり言うと、

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

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