이벤트 위임
다수의 배열 객체에 이벤트리스너를 하나 하나씩 다 걸어준다는 것은 메모리를 많이 잡아먹게됩니다.
이러한 낭비 발생을 방지하기 위해서 이벤트 위임이라는 개념을 사용하게 됩니다.
예시를 봅니다.
ul태그 안에 여러개의 li 태그가 존재합니다.
이 li 태그에 전부 forEache를 이용해서 이벤트 리스너를 걸어주는것은 꽤나 비효율적입니다.
<body>
<h1>장바구니</h1>
<div id="app"></div>
<ul>
<li class="li">노트북</li>
<li class="li">모니터</li>
<li class="li">의자</li>
<li class="li">키보드</li>
<li class="li">마우스</li>
<li class="li">책상</li>
</ul>
<script src="src/index.js"></script>
</body>
위의 방법 말고 다른 방법으로 이벤트 위임을 사용해보겠습니다.
이벤트 위임 방법 1
ul 태그 아래 li 태그들이 존재하므로 li 태그의 부모 요소에게 이벤트를 걸어주면 주었습니다.
부모요소를 통해서 자식 요소인 li에게도 이벤트가 전달되게 됩니다.
조금더 타겟을 좁혀봅시다.
부모 태그인 ul에 event.target을 이용해서 nodeName이 LI인 요소만 찝어보겠습니다.
또다른 방법으로 classList를 이용해서 타겟을 좁힐 수도 있습니다.
여러개의 classList 중 특정 클래스가 포함된 경우를 찾는 방법도 있습니다.
classList.contains(클래스명)를 이용하면 특정 클래스 이름이 포함 된 경우 true를 반환합니다.
'웹 개발 > 기초' 카테고리의 다른 글
| [CSS] Flex box 정 가운데 배치 / 배경 이미지 추가 (0) | 2022.04.04 |
|---|---|
| 콜백함수 (0) | 2022.03.23 |
| 자바스크립트 API 통신 (0) | 2022.03.21 |
| 자바스크립트 기본 문법 (0) | 2022.03.14 |
| [css] 반응형 레이아웃 만들기 (0) | 2022.03.10 |
[JS] 이벤트 다루기