Day76 - [js]이벤트위임을 활용한 여러개의 버튼

이번에는 java script 의 여러개의 버튼이 있을 때, 이벤트위임을 어떻게 활용하는지 알아 봅시다.

 

여러개의 버튼 이벤트 위임 작용

위처럼, 버튼이 하나가 아니라 여러개일 경우를 생각해 봅시다.

 

이벤트 위임을 사용하기 위해서는 해당 버튼들을 모두 자식으로 가지고 있는 최상위 부모 section 에 이벤트를 걸어주면 되겠죠?

 

그런데, section 에 이벤트를 걸고보니까, 버튼이 여러개에요

 

이럴 경우에는, if 문을 사용해서 어떤 버튼 인지 구분해주면 됩니다.

바로 classList 의 contains 함수를 사용합니다.

 

그러면 서로 다른 className 을 가지고 있는 버튼을 구분할 수 있겠죠?

 

이 외에, <div> <span> <section> 도 이벤트 위임 이 되고 있으니, 원하는 버튼 외에는 작동하지 않도록 esle 에 return 으로 빠져나가 줍시다.

 

예제.