dataset data-id을 이용해 이벤트 위임

소스코드1

 웹 상에서 리스트 요소를 동적으로 추가해주기 위해 다음과 같이 소스 코드를 작성하였다.

 이때 각 리스트를 식별할 수 있기 위해 리스트가 추가 될 때마다 어트리뷰트에 가산 된 data-id(dataset) 속성값을 지정하였다.

소스코드2

 위와 같이 각기 다른 data-id를 li 요소에 적용해 준 결과, li의 부모 요소 ul 태그인 items에 이벤트 핸들러를 등록하여 이벤트 위임을 통해 실제 클릭 이벤트가 발생 한 event.target을 id 값을 이용하여 식별할 수 있었다. 

 

data-id값 확인

실제로 event.taeget.dataset.id 소스 코드 쪽에 브레이크를 걸고 data-id값을 확인해 보면 리스트를 추가 한 순서대로 가산 된 id값이 어트리뷰트 값에 적용되어 있음을 확인할 수 있다.