jQuery - 여러 대상에 같은 이벤트 바인딩 & 이벤트 객체 핸들링

jQuery - 여러 대상에 같은 이벤트 바인딩 & 이벤트 객체 핸들링

 

개발 도중 초기에는 두가지 기능밖에 없던 버튼 기능이 다섯개로 늘어나면서 중복되는 코드가 많아져서 리팩토링하는 과정에서 jQuery를 이용하여 이벤트 바인딩을 하였다. 다섯개에 버튼중 클릭된 객체를 얻기 위해 이벤트 객체를 이용하여 정보를 얻는 과정을 정리한다.

 

여러 대상 이벤트 바인딩하기

기존에는 다음과 같이 각각 개별로 이벤트가 구현이 되어 있었다.

let lowBtn = document.getElementById("low-btn");
  lowBtn.addEventListener(
    'click',
    function(){ 
    })

이렇게 한두개 일때는 문제가 없지만 개수가 늘어남에 따라 계속 만들어주고 중복되는 코드들이 발생하여 유지보수에 문제가 생기게 된다.

 

다음은 제이쿼리를 이용하여 여러 버튼의 기능들의 이벤트를 바인딩하였다.

$('#Wireframe-btn, #Low-btn, #Medium-btn, #High-btn, #Extra-btn').click(
    (e) => { 
    })

 

다음과 같이 구현하면 버튼이 늘어나던지 없어지던지 상황에 맞춰 아이디 값만 추가 혹은 제거해주면 된다. 

처음과 같이 각각 이벤트를 만들게 되면 객체를 미리 만든후 가져오기에 이벤트 안에서 생성한 객체를 바로 가져다 쓸 수 있지만 이렇게 바인딩해서 가져오게 되면 클릭된 대상을 찾아주는 과정이 필요하다.

 

이벤트 객체 핸들링

그때 사용하는 것이 이벤트 객체이다. 기존 코드에서는 이벤트 객체를 통해 가져올 정보가 없었기때문에 콜백함수안에 이벤트 객체를 선언하지 않았지만 제이쿼리를 이용한 방법에서는 클릭된 해당 객체를 얻기 위하여 이벤트 객체를 넣어준다. 이벤트 객체의 정보를 핸들링하기 위해서는 타겟 객체를 이용한다.

e.target

target 선언 후 하위 객체들을 확인해보면 여러 정보들을 제공해준다. 아래에 기술된 정보 이외에도 여러 정보들을 핸들링 할 수 있으니 상황에 맞게 사용하면 된다.

event.target.id 
event.target.name 
event.target.value
event.target.nodeType
event.target.nodeName
event.target.parentNode.nodeName
event.target.parentNode.id
event.target.nextSibling.nextSibling.id 
event.target.parentNode		
event.target.parentElement