(JS) Event 객체

이벤트(event)

• 특정 버튼을 클릭했을 때, DOM이 로드되었을 때 등의 어떠한 사건을 의미한다.
• 브라우저는 이벤트를 감지할 수 있으며, 이를 통해 사용자와 웹 페이지의 상호 작용이 가능하다.
• 이벤트 핸들러를 통해 이벤트 발생 시 원하는 함수에 연결하여 실행시킬 수 있다.

event listner(event handler)

• 어떠한 이벤트가 발생했을 때 이를 처리하는 함수를 뜻한다.

이벤트 등록

자바스크립트에서 이벤트 리스너를 통해서 조건에 부합하는 동작이 발생했을때 발생시킬 이벤트를 함수로 표현한다.

<button>add one item</button>

var button = document.querySelector('button');
button.addEventListner('click',addItem);

function addItemt(event) {
  console.log(event);
}

add one item이라는 간단한 버튼을 만들어 클릭했을 때 addItem이라는 함수를 실행시키는 코드. 버튼을 클릭했을때 addItem 함수가 실행되고 addItem 함수에 event 인자가 넘어온다.

이처럼 addEventListner() 웹API는 웹 개발자들이 화면에 동적인 기능을 추가하기 위해 자연스럽게 접하게 되는 기본적인 기능이다.

이벤트 객체

이벤트 객체란 이벤트가 일어나는 요소 그자체를 의미한다.
addEventListner("click", function(e) 부분에서 e.target이 바로 이벤트 객체를 나타낸다.

event.target & event.currentTarget

• event.currentTarget은 이벤트가 걸려있는 위치를 반환하고,
• event.target은 실제 이벤트가 발생하는 위치, 즉 실제 내가 클릭한 요소를 반환합니다. 두 객체가 같을 수도 있지만 이벤트 위임을 통해 이벤트를 주었다면 두 개가 다를 수도 있다.