JavaScript - Event

이벤트는 무엇일까?

• 웹에서 이벤트란 쉽게 말해서 사용자가 버튼을 클릭하였을 때 그에 맞는 반응이 일어나는 현상을 이벤트라고 한다. 일반적으로 자바스크립트에서 함수를 통하여 이벤트를 연결하며 이벤트를 제어하는 함수를 이벤트 핸들러(Event Handler)라고 한다.

 

대표적인 이벤트 종류

• UI Event
  1. scroll = 사용자가 페이지를 스크롤할 경우 
  2. select = 텍스트를 선택하였을 경우
  3. resize = 사용자가 페이지의 크기를 조절하는 경우
• Keyboard Event
  1. keydown = 키를 누르고 있는 경우
  2. keyup = 키에서 손을 뗐을 경우
  3. keypress = 키를 눌렀을 경우
  4. keyCode = 키 코드값
• Mouse Event
  1. click = 클릭하였을 경우
  2. dbclick = 더블 클릭하였을 경우
  3. mousedown = 마우스 버튼을 누르고 있는 경우
  4. mouseup = 마우스 버튼을 뗐을 경우
  5. mouseout = 마우스를 요소 밖으로 나간 경우 
• Clipboard Event
  1. cut = 콘텐츠를 잘라내기 한 경우
  2. copy = 콘텐츠를 복사한 경우
  3. paste = 콘텐츠를 붙여넣기 한 경우

 

이벤트 핸들러 등록

const btn = document.querySelector('.btn')

btn.onclick = function() {
	alert('클릭하였습니다.')
}

• 위의 예시와 같이 객체의 프로퍼티를 이용하여 이벤트 핸들러를 등록할 수 있다. 하지만 새로운 이벤트 핸들러를 계속해서 등록하게 되면 기존의 값을 덮어쓰고 실행하기 때문에 여러개의 핸들러를 다룰 수 없다는 단점이 존재한다.
• 따라서 addEventListner를 활용하여 이벤트 핸들러를 설정하는 방법이 더 효율적이다.

 

addEventListner

• 기본구조는 다음과 같다.

대상요소.addEventListener('eventType',function)

 

function event1() {
	alert('이벤트 1')
}

btn.addEventListner('click', event1)

• 버튼을 클릭하게 되면 event1 함수가 실행되어 '이벤트 1'이라는 문구가 출력된다.

 

removeEventListner

• addEventListner과 반대되는 개념으로 선언하였던 addEventListner 메소드를 삭제시키는 경우에 사용된다.

 

Event.target

• 이벤트를 발생시킨 요소를 뜻한다. 즉 실제로 이벤트를 발생시킨 요소를 의미한다.
• 이벤트 핸들러를 작성할 때 많이 사용될것 같으니 의미를 제대로 파악하자!