Click Event 와 DOM 다루기 (Pure Javascript)

순수 자바스크립트로 특정 DOM Element에 Click Event를 추가 하는 방법은 아래와 같습니다.

var divElement = document.getElementById('sample');

divElement.addEventListener('click', (e) => {
	// To do something...
	alert('Click');
});

• document로 부터 element를 찾음.
• addEventListener(type, event) 메서드를 통해 이벤트 추가

웹개발자라면 위 코드 정도는 구글링 없이도 충분히 알 수 있을 겁니다.

 

그렇다면, 아래와 같은 간단한 문제를 해결해 봅시다.

 

아래 html에서 click 한 요소의 색깔을 변경 해보세요.

<div id="sample">
  <span>월</span>
  <span>화</span>
  <span>수</span>
  <span>목</span>
  <span>금</span>
  <span>토</span>
  <span>일</span>
</div>

 

#sample span{
  background: yellowgreen;
  cursor: pointer;
}

#sample span.active{
  background: green;
}

이 문제도 그다지 어렵지 않을 것입니다.

아래와 같이 class 속성을 조작하면 됩니다.

var divElement = document.getElementById('sample');

divElement.addEventListener('click', (e) => {
  var targetElement = e.target;
  targetElement.setAttribute('class', 'active');  
});

• e.target 으로 Click Event가 발생된 Element를 가져옴.
• 해당 Element에 'class' 속성에 'active' 추가함.

클릭 시 색깔 변경

 

평소 Pure Javascript를 어느정도 다뤄보았다면, 이 정도도 쉬울 듯합니다.

 

 

 

그렇다면...

좀 더 복잡하게 아래와 같이 기능을 하게 하려면 어떻게 해야할까요?

클릭 시 이전 요일 모두 색깔 변경

 

기능 구현을 위해서는 Html Element에 대해서 어느정도 알고 있어야 할 것입니다.

(저 같은 경우에는 웹 표준 API 공식문서[developer.mozilla.org/ko/] 꽤나 찾아봤네요...ㅜㅜ)

 

코드는 아래와 같습니다.

var divElement = document.getElementById('sample');

divElement.addEventListener('click', (e) => {
    if(e.target.nodeName == 'SPAN'){
      // click한 영역이 span일 때 처리
      var parentElement = e.target.parentElement;
      var children = parentElement.children;
      var idx = -1;	// 클릭한 요소 index
      
      for(var i = 0; i < children.length; i++){
      	children[i].removeAttribute('class');
      	if(e.target == children[i]) idx = i;
      }
      
      for(var i = 0; i < children.length; i++){
      	if(idx >= i){
          children[i].setAttribute('class', 'active');
        }
      }
    } else{
      var children = divElement.children;
      
      for(var i = 0; i < children.length; i++){
      	children[i].removeAttribute('class');
      }
    }
});

• [Element].parentElement 로 부모 Element를 가져옴.
• [Element].children 으로 자식 Element를 Array 로 가져옴.
• e.target == children[i] 조건절로 클릭 한 요소의 index를 알 수 있음.
• 하위 element를 순회하며 index 보다 작거나 같은 요소는 class='active' 처리.

 

프레임워크나 라이브러리 사용만 해왔다면 (필자 이야기...ㅜ)

아마 구글링 없이는 위와 같은 다소 간단한 기능도 작성하는데 꽤 힘들 수 있습니다!

이상 Pure Javascript(바닐라 자바스크립트라고도함)로 이벤트 및 DOM 다루기 예제 였습니다!