[JavaScript] event.target , 이벤트 위임

 

 

 event.target은 이벤트가 일어날 객체를 말한다. 버튼을 눌러 새로운 창이 열리는 객체가 있다면, 여기서 버튼이 event target이다. 

 

지정된 event target(html 요소)에 
지정된 event type(클릭이나 스크롤 등)이 발생하면
지정된 event handler(함수)가 실행된다. 

 

 

다른 프로퍼티와 조합하여 현재 이벤트가 발생한 요소의 속성 값을 얻을 수 있다. 

 

 

아래와 같이 id값이 nulbo인 div 태그를 클릭하면 alert("안녕 늘보")라는 말이 코드가 있다. 

<div id="nulbo">늘보<div>

<script>
let t = document.getElementById("nulbo");
t.addEventListener("click", function(event){
        alert("안녕 늘보");
    });
 </script>

 

 

마우스로 클릭했을 때 이벤트가 일어나는 event target으로 지정해 주었다. 이 target이 뭘까 살펴보자. event.target을 console로 찍어봤을 때 결과 값이다. 

 

 

📌 event.target.tagName  : div

📌 event.target.id : nulbo

📌 event.target.textContent : 늘보 

 

 

 

 

 

 

참고 :  https://velog.io/@nulbo/TIL-JavaScript-event.target-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%9C%84%EC%9E%84