자바스크립트 Multiple Click Event

# Multiple Click Event

그룹화 된 <button> 요소에 "클릭 이벤트(addEventListener)"를 하나 하나씩 적용한 것 보다 forEach 문을 활용하면 좀 더 간결한 코드로 작성할 수 있다.

<!-- 버튼 그룹 -->
<div class="btn-group">
	<button>버튼0</button>
	<button>버튼1</button>
	<button>버튼2</button>
</div>

<!-- 스크립트 -->
<script>
let btns = document.querySelectorAll(".btn-group button");
btns.forEach(function(item, index){
	item.addEventListener('click', function(){
    	// 클릭된 요소 출력
    	console.log(this);
    
    	// switch문을 활용하면 실행 조건을 다르게 적용할 수도 있다.
        switch(index){
          case 0: /* 버튼0번 실행코드 */ break;
          case 1: /* 버튼1번 실행코드 */ break;
          case 2: /* 버튼2번 실행코드 */ break;
        }
    });
});
</script>

 

[jQuery 코드]

$('.btn-group button').click(function(){
    var index = $(this).index(); 
    switch(index){
        case 0: break;
        case 1: break;
        case 2: break;
    } 
});