자바스크립트, 클릭 이벤트의 발생 대상(target) 가져오기

하고자 하는 것

자바스크립트에서 이벤트가 어디서 발생했는지 해당 DOM을 가져오고자 합니다.

방법

이벤트 부여 방식

자바스크립트에서 이벤트를 부여하는 방식은 크게 아래 두가지가 있습니다. *바닐라 JS 기준

<a href="javascript:void(0)" id="addCart">
     <span class="cart-text">장바구니</span>
</a>

위 처럼 a태그가 선언되어 있고, 여기에 클릭 이벤트를 걸려고 합니다.

1. 마크업 안에 onclick으로 이벤트 걸기

   <a href="javascript:void(0)" id="addCart" onclick="addCart();">
        <span class="cart-text">장바구니</span>
   </a>
   
   <script>
   	function addCart() {
   			alert('장바구니에 담았습니다.');
   			//...
   	}
   </script>

   • onclick을 통해, 해당 태그를 클릭했을 때 어떤 동작을 할지 설정하기!

2. DOM을 가져온 뒤, addEventListener(”click”, ...)으로 이벤트 걸기

   let elem = document.getElementById('addCart');
   elem.addEventListener("click", function(){
   	alert('장바구니에 담았습니다.');
   });

   • JS를 통해 해당 DOM을 가져와 클릭 이벤트를 걸어버리는 방식!

이벤트 발생 대상 가져오기

발생 대상 역시, 위의 두가지 방법 그대로 말씀드리겠습니다.

1. onclick 안의 함수에 파라미터로 this 객체를 보내기

   <a href="javascript:void(0)" id="addCart" onclick="addCart(this);">
        <span class="cart-text">장바구니</span>
   </a>
   
   <script>
   	function addCart(elem) {
   			console.log(elem);
   	}
   </script>

   • 클릭시, a태그의 DOM 객체가 반환된다. <a href="javascript:void(0)" id="addCart" onclick="addCart(this);"><span class="cart-text">장바구니</span></a>
   • 여기서 dataset이나 내부 text 등을 활용하면 된다.

2. addEventListener 콜백 함수에 event 파라미터 설정하기

   let elem = document.getElementById('addCart');
   elem.addEventListener("click", function(event){
   		console.log(event);
   });

   • 이 경우, 클릭이 발생한 PointerEvent {…} 란 이름의 이벤트 객체가 반환된다.
   • 해당 값 중, target에 불러오고자 했던, 이벤트 발생 대상 정보가 담겨있으니 innerText, dataset 등을 활용하면 된다.

왜 이렇게 사용하는데?

💬

개인적인 견해입니다 :D 조금 더 공부 한 뒤에 새롭게 알게된 사실이 있으면 수정할게요! 다양한 의견 주시면 감사하겠습니다.

1. 태그 내 정보나 data를 활용하기 위해서

   상품 리스트가 있는 페이지에는 하나의 상품을 div 태그로 묶고 dataset을 통해 다양한 정보를 입력한 상태라고 하자. 이런 상황에서 해당 div 영역을 클릭할 때 해당 상품의 가격을 가져오고 싶다면?

   이럴 땐, 해당 div마다 이벤트를 걸어놓고 this 혹은 event 객체로 가져온 div 태그의 정보를 활용하여 필요한 사항을 처리하면 된다.

2. 하드 코딩을 줄이기 위해 (⇒ 코드 확장성)

   1번의 내용과 비슷한 맥락인데 특정 함수에서 버튼마다 분기처리를 해야하는 과정에서 위와 같이 클릭 이벤트 대상 정보를 가져오지 못하면, 보내는 함수 자체가 onclick=”addCart(’delivery’)” , onclick=”addCart(’pickup’)” 처럼 특정 분기 형태를 직접 하드 코딩으로 입력하게 된다.

   이렇게 되면 다른 구분값이 생기는 상황을 자동으로 커버하지 못하게 된다. 지금은 분기가 두개라 두개의 태그로 가능하지만, 만약 분기처리해야할게 늘어난다면? 입력하는 데이터도 그만큼 늘어나게 된다.

3. 결국은 코드의 재사용성과 확장성, 가독성을 위함이다.

   Why 가독성? 함수가 하는 일을 파라미터에 따라 처리되는 것이 아닌, 자바스크립트 코드단에서 처리하기 때문에 자바스크립트 문서 하나만으로 컨트롤이 가능해짐. (HTML 파일과 JS 파일을 번갈아가며 볼 필요가 줄어듦)

   하나의 기능을 결정짓는, 하나의 변수가, 하나의 메소드에 존재하는 모습! 👀

---