이벤트(event)

브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시 알려 줄 수 있으며 이를 통해 사용자와 웹페이지가 상호 작용(interaction)이 가능하다.

이벤트 핸들러를 통하여 이벤트가 발생시 원하는 함수에 연결하여 실행 시킬 수 있다.

interaction은 HTML이나 CSS만으로 구현할 수 없고 자바스크립트 코딩이 필요합니다. 이렇게 특정 요소에 interactive한 반응을 할 수 있게 하는 것을 이벤트라고 합니다.

• 클릭 이벤트
• 마우스 이벤트
• 스크롤 이벤트
• 터치 이벤트
• resize(화면 크기 변화) 이벤트

등 다양합니다.

addEventListener

이벤트를 달 때 사용하는 함수 이름은 addEventListener입니다. event listener 단어를 해석하면 이벤트를 듣고 있다는 뜻이겠죠. addEventListener는 특정 이벤트가 언제 발생하는지 가만히 듣고 있다가, 발생하면 인자로 받은 함수를 실행시켜줍니다.

요소.addEventListener(이벤트종류, function() {
  //이벤트가 일어났을 때 실행할 내용
});

특정 요소에 addEventListener 함수를 붙이고(호출하고), 인자로 이벤트 종류와, 이벤트가 발생했을 때 실행할 함수를 전달합니다.
이때 인자로 전달된 함수를 콜백 함수라고 부릅니다.

이벤트 종류

이벤트에는 onchange, onclick ,onmouseover,onmouseout ,onkeydown 등 다양한 이벤트가 존재합니다.

MDN 이벤트 에 더 많은 이벤트를 확인할 수 있습니다.

이벤트 리스너 호출

이벤트 리스너가 등록되고 해당 객체나 요소에 지정된 타입의 이벤트가 발생하면, 브라우저는 자동으로 등록된 이벤트 리스너를 호출합니다.

이때 이벤트 리스너는 인수로 이벤트 객체(event object)를 전달받으며, 식별자를 통해 전달받은 이벤트 객체를 참조합니다.

이벤트 객체(event object)

이벤트 객체(event object)란 특정 타입의 이벤트와 관련이 있는 객체입니다.

이벤트 객체는 해당 타입의 이벤트에 대한 상세 정보를 저장하고 있습니다.

모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와 이벤트의 대상을 나타내는 target 프로퍼티를 가집니다.

이러한 이벤트 객체는 이벤트 리스너가 호출될 때 인수로 전달됩니다.

var btn = document.getElementById("btn"); // 아이디가 "btn"인 요소를 선택함.

btn.addEventListener("click", clickBtn);  // 선택한 요소에 click 이벤트 리스너를 등록함.

function clickBtn(event) {

    document.getElementById("text").innerHTML =

    "이 이벤트의 타입은 " + event.type + "이며, 이벤트의 대상은 " + event.target + "입니다.";

}

event.code를 통해 입력된 키의 이름 정보를 가져올 수 있습니다.

enter키의 code는 'Enter' 입니다. 따라서 아래와 같이 코드를 짤 수 있습니다.

.addEventListener('keydown', function(event) {
  if (event.code === 'Enter') {
    // 엔터로 접근
  }
});

두 번째 인자로 들어오는 함수에서 항상 event와 관련된 정보를 인자로 받을 수 있습니다.