[JavaScript] 자바스크립트 이벤트

이벤트란?

 

- 웹 브라우저나 사용자가 행하는 동작
- 웹 문서 영역안에서 이루어지는 동작만 가리킴
- 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생

 

 

 

이벤트의 종류

* 마우스 이벤트

* 키보드 이벤트 

* 폼 이벤트
* 문서 로딩 이벤트

 

 

 

마우스 이벤트

이벤트	설명
click	마우스 버튼을 클릭했을 때
dbclick	마우스 버튼을 더블 클릭했을 때
mousedown	마우스 버튼을 누르고 있을 때
mouseup	누르고 있던 마우스 버튼을 뗄 때
mousemove	마우스를 움직일 때 (터치스크린에서 동작하지 않는다)
mouseover	마우스를 요소 위로 움직였을 때 (터치스크린에서 동작하지 않는다)
mouseout	마우스를 요소 밖으로 움직였을 때 (터치스크린에서 동작하지 않는다)
mouseenter	해당 요소에 마우스 커서를 올려다 놓았을 때
mouseleave	해당 요소에 마우스 커서를 빼낼 때

 

 

 

 

키보드 이벤트

이벤트	설명
keydown	키를 누르고 있을 때
keyup	누르고 있던 키를 뗄 때
keypress	키를 누르고 뗏을 때

 

 

 

 

 

폼 이벤트

이벤트	설명
focus	대상에 포커스가 들어왔을 때
blur	대상에 포커스가 벗어났을 때
input	input 또는 textarea 요소의 값이 변경되었을 때
change	체크박스, 라디오 버튼의 값이 변경되었을 때
submit	submit버튼을 눌러 폼을 제출할 때
reset	리셋버튼을 눌렀을 때

 

 

 

 

문서 로딩 이벤트

이벤트	설명
abort	웹 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때
error	문서가 정확히 로딩되지 않았을 때
load	문서 로딩이 완료되었을 때
resize	문서 화면 크기가 바뀌었을 때
scroll	문서 화면이 스크롤 되었을 때
unload	문서를 벗어날 때(링크를 클릭, 브라우저 창을 닫을때 등)

 

 

 

 

이벤트 핸들러 (event handler)

 

이벤트가 발생하면 그에 맞는 반응을 하여야 한다.

이를 위해 이벤트는 일반적으로 함수에 연결되며 그 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생되면 실행된다. 이러한 함수를 이벤트 핸들러라 하며 이벤트에 대응하는 처리를 기술한다.

 

 

이벤트 핸들러 등록하기

 

자바스크립트에서 이벤트 핸들러를 등록하는 방법은 세 가지가 있다.

 

1. HTML 태그에 등록하는 방법

2. DOM 요소의 프로퍼티로 등록하는 방법

3. addEventListener 메서드를 사용하는 방법

 

 

 

1. HTML 태그에 설정 (권장 X)

 

이 방법은 사실상 간단한 방법이지만 HTML과 자바스크립트 코드가 섞여있기 때문에 나중에 유지보수가 힘들다.
또한 태그 하나에 하나의 이벤트처리만 등록할 수 있다.
기본적으로 HTML과 자바스크립트는 분리하는게 맞다.

 

 

>> 이렇게 on다음에 이벤트 타입을 적어준다.

 

 

 

 

>> 다른방법으로, sayHello라는 함수를 정의해서 태그안에 이벤트핸들러를 등록했다.

 

 

 

 

 

2. DOM 요소 객체의 프로퍼티에 등록

 

 

이 방법을 사용하면 HTML과 자바스크립트를 분리할 수 있지만 위와 마찬가지로 특정 DOM 요소 객체에
하나의 이벤트 핸들러만 등록시키는 단점이 있다.

 

 

>> 이번에는 버튼에 id를 주고 핸들러를 할당했다.
이때 sayHello의 괄호는 없어야한다. 괄호가 있으면 함수의 반환값이 할당되며 지금은 undefined 상태기 때문이다.

 

 

 

3. addEventListener 메서드 사용

 

addEventListener 함수 방식은 아래와 같은 장점을 갖는다.

- 하나의 이벤트에 대해 하나 이상의 이벤트 핸들러를 추가할 수 있다.
- 캡처링과 버블링을 지원한다
- HTML 요소뿐만 아니라 모든 DOM요소에 대해 동작한다. 브라우저는 웹 문서를 로드한 후 파싱하여 DOM을 생성한다.

 

 

 

 

addEventListener는 특정 이벤트가 발생하면, 전달된 함수 즉 핸들러를 실행한다.

위의 코드에서 특정 이벤트는 click이며, 전달된 함수는 sayHello이다.

 

인수로 sayHello라는 함수를 넘겨주어도 되고 아래처럼 직접 함수를 작성해서 넘겨줄수도 있다.