이벤트 핸들러

이벤트(event)란?

오늘날 웹 페이지는 사용자와 수많은 상호작용을 하게 된다.

사용자는 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글을 쓰는 등 수많은 종류의 동작을 수행합니다.

 

이벤트가 발생했다는 것은 웹 페이지에서 특정 동작이 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미한다.

 

이벤트 핸들러(event handler)

웹 페이지에서는 수많은 이벤트가 계속해서 발생한다.

특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)라는 함수를 작성하여 연결해야 한다.

이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행한다.

 

이벤트 객체(event object)

DOM과 관련된 이벤트가 발생하면 관련 정보는 모두 event객체에 저장된다.

이벤트 발생 요소, 이벤트 타입, 이벤트 관련 데이터도 저장된다.

 

ex) 마우스 이벤트 -> 마우스의 위치정보 포함 등

키보드 이벤트 -> 누른 키의 키코드 등

 

var btn = document.getElementById("myBtn");

btn.onclick = function(event) {

    console.log(event.type);

};

 

btn.addEventListener("click", function(event) {

  cosole.log(event.type);

}, false)