패스트캠퍼스 - Events(2)

clouood·2024년 4월 1일

패스트캠퍼스

목록 보기
13/18

이벤트 옵션

addEventListener의 세 번째 인수로 once 옵션을 추가할 경우, 이벤트는 한 번 발생하게 된다.

parent 요소를 계속 클릭하더라도 콘솔창에 'Parent!'는 한 번 출력됨.

once 옵션은 핸들러 함수를 한 번 실행하도록 하는 옵션


다음으로, passive 옵션을 추가할 수도 있음.


passive 옵션은 브라우저에게 이벤트 리스너가 스크롤 동작을 막지 않음을 알려주는 옵션. 이는 스크롤 동작을 최적화하는 데 도움이 된다.

부드럽게 스크롤됨. 기본 동작과 핸들러의 실행을 분리하기 때문.
만약, passive 옵션을 넣지 않을 경우에는 스크롤이 매우 더디게 작동된다.

passive 옵션은 화면을 보다 부드럽게 동작시키므로 사용성이 좋아짐

이벤트 위임

HTML 코드.

querySelectorAll을 사용하면, nodeList를 반환, forEach를 사용할 수 있다.

각 요소를 누르면 각 요소에 해당하는 텍스트가 출력됨. 이는 각각의 요소에 모두 클릭 이벤트가 적용되었기 때문.


하지만 모든 child 요소를 클릭했을 시, 콘솔창에 textContent를 출력하는 기본 로직은 같음. 그러므로 함수를 총 4번 등록할 필요가 없으며, '이벤트 위임'을 통해서 딱 한 번 등록해서 사용할 수 있다.

이벤트 타겟이라는 속성은 이벤트가 발생한 요소 자체를 말함. 그 요소에 만약 child라는 클래스가 있거나 혹은 가까운 조상 요소에도 child 클래스가 있다면, 그 child 요소를 찾아서 textContent를 출력한다.

이처럼 하나의 조상 요소에만 클릭 이벤트를 추가했으므로 하나의 핸들러 부분만 등록되었음. 실제 적용되는 것은 총 4개의 요소.

profile
雲外蒼天

0개의 댓글