[js] event.target

addEventListener 함수로 이벤트 핸들러를 등록할 때 객체를 전달해야 하는 경우가 있습니다.

예를 들어 다음과 같은 tag가 있을 때

<div id="hideTab" style="visiblility: visible" class="hideClass" value="value">

이 tag를 click할 시 style.visibility 값을 hidden으로 바꾸고 싶다면 클릭시 해당 객체의 정보를 넘겨줘야 합니다.

그럴 땐 이벤트 핸들러 메소드의 매개변수로 Event 인터페이스 객체를 받는다는 의미로 변수명을 입력하고 (관습적으로 e,event를 입력한다.) e의 속성 중 target을 사용해 해당 이벤트 객체의 속성값에 접근합니다.

const hideTab = document.getElementById('hideTab');
function hide(e){
	e.target.style.visibility = "hide";

}

hideTab.addEventListener('click',hide); 

hideTab이란 id를 가진 tag를 click시 hide란 함수를 실행하는 hideTab.addEventListener 메소드가 실행되고

hide 함수는 이벤트 객체의 style.visibility 속성을 “hide”로 초기화 시킵니다.

이밖에도 여러 속성값들을 얻어낼 수 있는데요.

target	값
e.target.value	value
e.target.style.visibility	visible
e.target.class	hideClass
e.target.id	hideTab

이 값들을 이벤트 핸들러 함수에서 조작할 수 있습니다.

React 활용

이런 특성을 React에서도 활용할 수 있습니다.

let [inputValue,setInputValue] = useState("");

이런 변수가 있다고 할 때.

      <input onChange={ (e)=>{ setInputValue(e.target.value)} } />
       {inputValue}

input에 입력한 값이 변할 때마다, 매개변수로 받은 현재 이벤트 객체 input의 value (e.target.value)를 setInputValue에 넣어주면 기존 inputValue값을 변경할 수 있습니다.