바닐라 자바스크립트로 동적 태그에 이벤트 연결

$(document).on('click', '.list', function(e) {
    alert(e.target);
});

제이쿼리에서는 이렇게 동적 바인딩을 한다. 여기에서 .list 클래스는 생성되는 동적 태그를 가지고 있는 상위 태그를 의미한다. 바닐라 자바스크립트에서도 같은 방식을 사용할 수 있다.

document.querySelector('.list').addEventListener('click', function(e) {
    console.log(e.target);
});

list라는 태그 클래스 안에서 생성되는 동적 태그들이 클릭되면 해당 이벤트를 발생시킨다. 제이쿼리에서나 바닐라 자바스크립트에서나 동적 태그들은 문서가 만들어지는 시점에서는 아직 생성되지 않았으므로 반드시 동적 태그들을 포함하고 있는 정적인 상위 태그를 먼저 선택해줘야 한다. 그리고 e.target은 생성된 해당 동적 태그를 나타낸다. getAttribute, setAttribute 메서드를 이용해서 태그를 제어할 수 있다.