이번에는 java script 의 여러개의 버튼이 있을 때, 이벤트위임을 어떻게 활용하는지 알아 봅시다. 여러개의 버튼 이벤트 위임 작용 위처럼, 버튼이 하나가 아니라 여러개일 경우를 생각해 봅시다. 이벤트 위임을 사용하기 위해서는 해당 버튼들을 모두 자식으로 가지고 있는 최상위 부모 section 에 이벤트를 걸어주면 되겠죠? 그런데, section 에 이벤트를 걸고보니까, 버튼이 여러개에요 이럴 경우에는, if 문을 사용해서 어떤 버튼 인지 구분해주면 됩니다. 바로 classList 의 contains 함수를 사용합니다. 그러면 서로 다른 className 을 가지고 있는 버튼을 구분할 수 있겠죠? 이 외에, 도 이벤트 위임 이 되고 있으니, 원하는 버튼 외에는 작동하지 않도록 esle 에 retur..

이번에는 java script 의 이벤트위임 의 원리 인 버블링 과 그에 반대인 캡쳐링 을 알아 봅시다. 버블링 vs 캡쳐링 버블링과 캡쳐링은 하나의 특성이라고 생각을 하면 될 것 같습니다. java script 에서 이벤트가 발생되는 곳을 확인 하기 위해서, 캡쳐링을 수행하고, target 을 발견하면, 버블링을 수행합니다. 즉. 이벤트를 실행하기 위해서, 어떤 이벤트가 실행되는지 알아보려고 캡쳐링을 수행 합니다. 이 때, 부모 노드부터 차례대로 내려오면서 이벤트를 실행합니다. window -> document -> html -> body -> .... 이를 캡쳐링 이라고 합니다. 이제, evnet.target 을 발견(어떤 이벤트가 실행되는지 찾음) 하면, 내려가는 걸 멈추고, 다시 window 에 ..

이번에는 java script의 event 객체와 이벤트 위임에 대해서 알아봅시다. event event 객체는, 이벤트가 발생했을 때 ( 예를 들면 클릭 ) 함수가 기본적으로 내장하고 있는 arguments 객체에 event 객체가 포함되어 있습니다. 즉. 함수 안에서 event 객체를 그냥 사용할 수 있습니다. event 객체는 이벤트 관련 기능들이 여러개 있는데, 그 중에서 이벤트가 발생된 곳을 지칭하는 .target 이 있습니다. 위와 같이 있을때, 를 클릭하면, 아래의 태그의 innerHTML 이 바로 삽입이 되게하려면, 해당 태그에 전부 onclick 이벤트를 걸어주고, 클릭된 가 어떤건지 파악한 후, 클릭된 를 에 넣어주면 되겠죠? 이럴 때 사용하는 것이, event.target 입니다. ※..

이번에는 java script 의 toggle 에 대해서 알아 봅시다. toggle toggle 은, 하나의 버튼을 가지고 새로운 클래스명을 추가하는 것을 의미 합니다. 아래의 기능 해당 버튼을 클릭하면. 하나의 버튼이 변경이 되는 겁니다. 위의 기능을 구현하기 위해서 아래의 버튼을 하나 만들어 주세요. 해당 버튼에 스타일도 줍시다. class 명이 change 로 변경되었을 경우도 생각해서 style 을 줬습니다. 위처럼, className 이 1개라면, 아래의 방식으로 구현할 수 있습니다. 위의 코드로 실행을 하게되면, 버튼을 클릭했을 때, className 이 "toggle" 과 "change" 를 번갈아가면서 가지게 됩니다. 그런데, 보통 className이 1개 인가요? 보통은 여러개의 clas..