고지은고

저번 포스팅에선 버블링과 캡처링에 대해 알아보았다 버블링과 캡처링이 브라우저에서 이벤트가 발생하고 동작하는 방식, 그 자체에 대한 용어라면 이벤트 위임은 이러한 방식을 이용한 기술이라고 할 수 있다 자바스크립트에서 동적인 요소의 이벤트를 처리할 때, 만약 투두 리스트를 만든다는 가정하에 1 2 3 4 5 6 7 8 9 10 1부터 10까지의 자식 요소인 list가 있고 그 자식 요소들을 ul이라는 부모 요소가 감싸고 있다고 가정해보자 이 경우, 자식 요소인 를 클릭하면 할 일을 완료했다는 의미에서 밑줄을 치거나 없애는 이벤트를 등록할 때 자체에 이벤트 핸들러를 등록하여 documentqueryselectorall + forEach 구문을 이용할 것이다 위의 코드 블록처럼 1~10까지의 요소들만 존재한다면..

강의를 듣다가 캡처링과 버블링에 대해서 간단히 알게 되었다 나중에 이벤트 위임에 대해 배우기 위해 꼭 알고 있어야 할 필수지식이라 이번 포스팅에 정리해보려 한다 버블링이란? 화면에서 어떠한 이벤트가 발생했을 시, 하위부터 시작해서 그 이벤트가 최상위까지 전달되는 것을 말한다 참고로 무조건 이벤트를 주었다고 전파되는 것이 아닌, 부모-자식관계이며 (형제관계 X) 하위에 click 이벤트를 주었을 때 마찬가지로 최상위도 click 이벤트가 존재한다면 버블링이 발생하고, 최상위가 click이 아닌 submit 등 다른 이벤트면 버블링이 되지 않는다. 브라우저에서 이벤트 처리 시, 기본은 버블링이지만 최상위 요소 (부모)에 { capture: true} 속성을 적용하여 캡처링으로 변경이 가능하다 (원래 디폴트 ..