이벤트위임(2)
-
Day76 - [js]이벤트위임을 활용한 여러개의 버튼
이번에는 java script 의 여러개의 버튼이 있을 때, 이벤트위임을 어떻게 활용하는지 알아 봅시다. 여러개의 버튼 이벤트 위임 작용 위처럼, 버튼이 하나가 아니라 여러개일 경우를 생각해 봅시다. 이벤트 위임을 사용하기 위해서는 해당 버튼들을 모두 자식으로 가지고 있는 최상위 부모 section 에 이벤트를 걸어주면 되겠죠? 그런데, section 에 이벤트를 걸고보니까, 버튼이 여러개에요 이럴 경우에는, if 문을 사용해서 어떤 버튼 인지 구분해주면 됩니다. 바로 classList 의 contains 함수를 사용합니다. 그러면 서로 다른 className 을 가지고 있는 버튼을 구분할 수 있겠죠? 이 외에, 도 이벤트 위임 이 되고 있으니, 원하는 버튼 외에는 작동하지 않도록 esle 에 retur..
2021.06.03 -
Day76 - [js]event객체 , 이벤트위임
이번에는 java script의 event 객체와 이벤트 위임에 대해서 알아봅시다. event event 객체는, 이벤트가 발생했을 때 ( 예를 들면 클릭 ) 함수가 기본적으로 내장하고 있는 arguments 객체에 event 객체가 포함되어 있습니다. 즉. 함수 안에서 event 객체를 그냥 사용할 수 있습니다. event 객체는 이벤트 관련 기능들이 여러개 있는데, 그 중에서 이벤트가 발생된 곳을 지칭하는 .target 이 있습니다. 위와 같이 있을때, 를 클릭하면, 아래의 태그의 innerHTML 이 바로 삽입이 되게하려면, 해당 태그에 전부 onclick 이벤트를 걸어주고, 클릭된 가 어떤건지 파악한 후, 클릭된 를 에 넣어주면 되겠죠? 이럴 때 사용하는 것이, event.target 입니다. ※..
2021.06.03