javascript : 이벤트 리스너 줄이기! 성능개선

 <div class="container mt-5">
    <ul class="list">
      <li class="tab-button" data-id="0">Products</li>
      <li class="tab-button orange" data-id="1">Information</li>
      <li class="tab-button" data-id="2">Shipping</li>
      
    </ul>

예시 코드 입니다.

 

버튼을 클릭후 실행 하고 싶을때 보통 이벤트 리스너를 통해 클릭 이벤트를 쓰곤 합니다.

예시를 보면 버튼 3개가 있어 3개가 부착하여 사용을 하게 되었습니다.

하지만 list에 이벤트 리스너 하나만 부착해도 버튼을 기능을 구현이 가능하단걸 알게 되었습니다.

 

버튼 3개의 부모인 <ul class= "list"> 에서 이벤트 리스너 1개만 있어도 탭기능을 만들 수 있습니다.

그건 이벤트버블링 현상 때문인데요. 버튼중 2번째 버튼을 눌러도 그 상위요소인 ul도 같이 동작을 하기 때문입니다.

 

이벤트 버블링이란 li 의 부모인 ul 에도 클릭의 영향이 가는 이상한(?) 현상입니다.

이걸 이용해서 코드를 짜게 되면

 

$('.List').click(function() {
지금 누른게 버튼 0이면 탭열기(0) 실행
지금 누른게 버튼 1이면 탭열기(1) 실행
지금 누른게 버튼 2이면 탭열기(2) 실행
})

이렇게 탭기능을 만들어도 잘 동작을 하게 됩니다.

 

✔이벤트리스너를 줄여 코드를 짜는이유

: 버튼이 몇십개 있다면 위의 코드처럼 부모코드를 이용하는게 덜 복잡합니다.

- 이벤트 리스너를 줄이면 램용량을 절약할 수 있습니다. 성능개선의 일환 입니다.