[JavaScript (17)] Javascript Event(1) - 기초

[JavaScript (17)] Javascript Event(1) - 기초

안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 이벤트 기본 ] 입니다. : ) 

 

 

▶ 1. 이벤트(event)란?

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

 

▶ 2. 이벤트 타입(event type)

 - 이벤트 타입은 발생한 이벤트의 종류를 말하며 키보드, 마우스, HTML DOM, Window 객체 등을 처리하는 이벤트등을 제공 한다.
 ex) 브라우저에서의 이벤트란 예를 들어 사용자가 특정 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것
 - 자세한 내용은 해당 페이지에서 확인 하자.

   ( developer.mozilla.org/en-US/docs/Web/Events )

 

 - 메서드 정리

★ 기본 메서드
preventDefault() : 그 이벤트의 기본 액션을 취소할 수 있다면 취소
stopImmediatePropagation() : 같은 이벤트의 다른 리스너가 호출되는거 방지
stopPropagation() : 이벤트 플로우 도중 이벤트의 확산(propagation) 방지

★ 기본 속성
type : 이벤트의 이름 반환
view : 이벤트가 발생한 윈도우 객체의 참조 반환
bubbles : 특정 이벤트가 버블링 이벤트인지 반환
cancelable : 이벤트가 기본 액션을 취소할 수 있는지 반환
currentTarget : 이벤트 리스너가 이벤트를 시작했을 때 그 요소를 반환
defaultPrevented : preventDefault() 메서드가 그 이벤트에 호출될 수 있는지 반환
eventPhase : 이벤트 플로우의 어떤 페이즈가 현재 평가되고 있는지 반환
isTrusted :이벤트가 신뢰되는지 반환
target : 이벤트를 일으킨 요소 반환
timeStamp : 이벤트가 생성된 시간 반환(밀리초)
 
★ 키보드 이벤트
onkeydown : ANY key is pressed(키보드를 누루고 있을 때)
onkeypress : ANY key (except Shift, Fn, or CapsLock) is in a pressed position (fired continuously). (키보드를 지속적으로 누르고 있을때)
onkeyup : ANY key is released(키보드를 누른 후 떼었을 때)
# 발생 순서 : 1. onkeydown 2. onkeypress 3. onkeyup

★ 키보드 이벤트 객체
altKey : 키보드 이벤트가 발생했을 때 ALT 키가 눌렸는지 반환
ctrlKey : 키보드 이벤트가 발생했을 때 SHIFT 키가 눌렸는지 반환
charCode : onkeypress 이벤트를 발생시킨 키의 유니코드 문자 코드 반환
key : 그 이벤트로 표시되는 키 값 표시
keyCode : onkeypress를 발생시킨 키의 유니코드 문자 코드 반환, onkeydown 또는 onkeyup 을 일으킨 유니코드 키 코드 반환
location : 키보드 또는 디바이스 위의 키의 위치 리턴
metaKey : 키보드 이벤트가 발생했을 때 META 키가 눌렸는지 반환
shiftKey : 키보드 이벤트가 발생했을 때 SHIFT 키가 눌렸는지 반환
which : onkeypress를 발생시킨 키의 유니코드 문자 코드 반환, onkeydown 또는 onkeyup 을 일으킨 유니코드 키 코드 반환

★ 마우스 이벤트들
onauxclic : 마우스 왼쪽버튼을 제외한 다른 버튼을 클릭했을 때 작동한다. (오른쪽 버튼, 휠버튼, 다른 매크로 버튼 등)
onclick : 요소 위에서 클릭했을 때 이벤트 발생
oncontextmenu : 컨텍스트 메뉴를 열기 위해서 마우스 오른쪽 버튼을 눌렀을 때 이벤트 발생
ondblclick : 요소 위에서 더블 클릭 했을 때 이벤트 발생
onmousedown : 요소 위에서 마우스 버튼을 누룰 때 발생
onmouseenter : 포인터가 요소로 들어갈 때 이벤트 발생
onmouseleave : 포인터가 요소 밖으로 나갈 때 이벤트 발생
onmousemove : 요소 위에서 포인터가 이동 중일 때 이벤트 발생
onmouseover : 포인터가 요소 위로 올라왔을 때 또는 자식 요소 위로 올라왔을 때 이벤트 발생
onmouseout : 마우스 포인터가 요소 밖으로 나가거나 자식 요소 밖으로 나갔을 때 이벤트 발생
onmouseup : 마우스 버튼을 떼었을 때 이벤트 발생
onselect: text가 선택됐을 때(드래그) 작동된다. 이 event는 element가 <input>태그 중 type이 text, textarea일 때만 작동한다.
wonheel: 사용자가 휠을 작동시킬 때 작동한다.

★ 휠 이벤트 객체
deltaX : 마우스 휠의 수평 스크롤의 양 반환 (x-축)
deltaY : 마우싀 휠의 수직 스크롤의 양 반환 (y-축)
deltaZ : 마우스 휠의 z-축에 대한 스크롤의 양 반환
deltaMode : 델타 값의 측정 단위 표시 (픽셀, 라인, 페이지)

★ 마우스 이벤트 객체
altKey : 마우스 이벤트가 발생했을 때 ALT 키가 눌렸는지 반환
button : 마우스 이벤트가 발생했을 때 마우스 버튼이 눌렸는지 반환
buttons : 마우스 이벤트가 발생했을 때 마우스 버튼들이 눌렸는지 반환
clientX : 마우스 이벤트가 발생했을 때 현재 윈도우에 대한 마우스 포인터의 수평 좌표 반환
clientY : 마우스 이벤트가 발생했을 때 현재 윈도우에 대한 마우스 포인터의 수직 좌표 반환
ctrlKey : 마우스 이벤트가 발생했을 때 CTRL 키가 눌렸는지 반환
detail : 마우스가 몇번이나 클릭되었는지 수 반환
metaKey : 마우스 이벤트가 발생했을 때 META 키가 눌렸는지 반환
relatedTarget : 마우스 이벤트를 일으킨 요소와 관련된 요소 반환
screenX : 마우스 이벤트가 발생했을 때 화면에 대한 마우스 포인터의 수평 좌표 반환
screenY : 마우스 이벤트가 발생했을 때 화면에 대한 마우스 포인터의 수직 좌표 반환
shiftKey : 마우스 이벤트가 발생했을 때 SHIFT 키가 눌렸는지 반환
which : 마우스 이벤트가 발생했을 때 어떤 마우스 버튼이 눌렸는지 반환

★ 드래그 & 드랍 이벤트
ondrag : 드래그되고 있을 때
ondragend : 드래그를 끝마쳤을 때
ondragenter : 드래그되는 요소가 드랍 타겟에 들어갔을 때
ondragstart : 드래그를 시작 했을 때
ondragleave : 드래그되는 요소가 드랍 타겟에서 나왔을 때
ondragover : 드래그되는 요소가 드랍 타켓 위에 있을 때
ondrop : 드래그되는 요소가 드랍 타켓 위에 떨어졌을 때

★ 프린팅 이벤트
onbeforeprint : 페이지가 인쇄 되기 직전
onafterprint : 페이지가 인쇄를 시작했을 때, 즉 인쇄창이 닫혔을 때.

★ 클립보드 이벤트
oncut : 요소의 내용을 잘라냈을 때
oncopy : 요소의 내용을 복사했을 때
onpaste : 붙여넣기 할 때

★ 포커스 이벤트
onfocus : 포커스를 받았을 때
onblur : 포커스를 잃었을 때
onfocusin : 포커스 받기 직전
onfocusout : 포커스 잃기 직전

★ 포커스 이벤트 객체
relatedTarget : 그 이벤트를 일으킨 요소와 관련된 요소 반환

★ 폼 이벤트
onreset : 폼이 리셋 되었을 때
onsubmit : 폼이 전송되었을 때

★ CSS 애니메이션 이벤트
animationstart : CSS 애니메이션이 시작될 때
animationcancel : CSS 애니메이션이 중지 되었을때
animationend : CSS 애니메이션이 완료되었을 때
animationiteration : CSS 애니메이션이 반복될 때

★ 애니메이션 이벤트 객체
animationName : 그 애니메이션의 이름 반환
elapsedTime : 애니메이션이 경과된 초 반환

★ CSS 변화 이벤트
transitionstart : CSS 변화가 시작 되었을때(시작 후 실행)
transitioncancel : CSS 변화 중지 되었을 때
transitionend : CSS 변화 완료 되었을 때
transitionrun : CSS 변화가 실행되기 시작했을때(시작 전에 실행)

★ CSS 변화 이벤트 객체
propertyName : 그 트랜지션과 관련된 CSS 속성 이름 반환
elapsedTime : 트랜지션이 경과된 초 반환

★ 웹소켓 이벤트
onopen : 웹소켓 연결이 되었을 때
onmessage : 웹소켓을 통해 메시지를 받았을 때
onerror : 웹소켓 에러가 발생할 때
onclose : 웹소켓 연결이 종료 되었을때

★ 터치 이벤트
ontouchcancel : 터치가 중단될 때
ontouchend : 터치 스크린에서 손가락을 뗄 때
ontouchmove : 손가락으로 스크린을 드래할 때
ontouchstart : 손가락을 터치 스크린 위에 놓을 때

★ 해시 체인지 이벤트 객체
newURL : 해시가 변경된 후 그 URL 반환
oldURL : 해시가 변경되기 전 그 URL 반환

★ 미디어 이벤트
oncanplay : 브라우저가 미디어 재생을 시작할 수 있을 때 (시작하기에 충분한 버퍼가 찼을 때)
oncanplaythrough : 버퍼링 없이 미디어를 재생할 수 있을 때
ondurationchange : 미디어 시간이 변경 되었을 때
onemptied : 문제가 발생해서 미디어를 갑자기 이용할 수 없을 때 (예기치 못한 연결 종료 같은)
onended : 미디어가 끝에 도달했을 때 ("들어 주셔서 감사합니다." 같은 메세지 표시에 유용)
onloadeddata : 미디어 데이터가 로드 되었을 때
onloadedmetadata : 메타 데이터(해상도나 시간 같은)가 로드 되었을 때
onpause : 미디어가 일시 중지 되었을 때
onplay : 미디어가 시작되었을 때
onplaying : 미디어가 일시정지나 버퍼링을 위한 중지 이후에 재생될 때
onratechange : 미디어의 재생 속도가 변경되었을 때
onseeked : 미디어의 새로운 위치로 이동되거나 또는 스킵된 후
onseeking : 미디어의 새로운 위치로 이동하거나 스킵을 시작할 때
onstalled : 브라우저가 미디어 데이터를 받으려고 하지만 데이터가 이용가능하지 않을 때
onsuspend : 브라우저가 일부러 미디어 데이터를 받지 않을 때
ontimeupdate : 재생 위치가 변경 되었을 때 (미디어의 다른 위치로 이동을 할 때와 같은)
onvolumechange : 미디어의 볼륨이 변경되었을 때 (음소거 포함)
onwaiting : 미디어가 일시 중지 되었지만 곧 재생될 걸로 예상될 때(더 많은 데이터를 버퍼링하기 위해 일시 중지 되는 경우와 같은)

★ 기타 이벤트
onmessage : 객체로 부터 메시지를 받았을 때 (웹소켓, 웹워커, 이벤트 소스, 자식 프레임, 부모 윈도우)
onmousewheel : (더이상 사용 안함) 대신에 onwheel 이벤트를 사용하라.
ononline : 브라우저가 온라인 작업을 시작할 때
onoffline : 브라우저가 오프라인 작업을 시작할 때
onpopstate : 윈도우 히스토리가 변경될 때
onshow : 메뉴 요소가 컨텍스트 메뉴료 표시될 때
onstorage : 웹 스토리지 영역이 업데이트될 때
ontoggle : detail 요소를 열거나 닫을 때
onwheel : 요소 위에서 마우스 휠을 올리거나 내릴 때

 

▶ 3. 이벤트 리스너(event listener), 이벤트 핸들러(event handler)

 - 어떤 이벤트가 발생했을 때 이를 처리하는 함수를 이벤트 리스너 또는 이벤트 핸들러라고 한다.

 

◎ 2.1 이벤트 리스터(핸들러) 등록
 - 이벤트 등록 방법은 현재까지는 3가지가 있다. 각각의 방식마다 장단점, 유의사항이 있으니 확인 하고 넘어가자.

 

1) 인라인 방식(Inline)
 - 인라인 방식은 이벤트를 HTML 요소의 속성으로 직접 지정하는 방식이다.
 - HTML 코드에 자바스크립트를 추가함으로써 결국 HTML코드와 스크립트가 섞여 사용 되기 때문에 관점에 따라서는 유지보수에 안좋을 것이다.

 

ex) 예제1

<!DOCTYPE html>
<html>
<body>
    <button onclick="testHandler()">Test</button>
    <script>
    function testHandler() {
        alert('Hello world');
    }
    </script>
</body>
</html>

 

ex) 예제2

<!DOCTYPE html>
<html>
<body>
    <button onclick="alert('Hello world');">Test</button>
</body>
</html>

 

 

2) 프로퍼티 방식(Property)
 - 자바스크립트 코드에서 프로퍼티로 등록하여 사용하는 방식이다. 
 - HTML 코드와 자바스크립트가 섞여 사용되지 않는다.
 - 하나의 이벤트 핸들러 프로퍼티엔 하나의 이벤트 핸들러만 바인딩 가능하다.

ex)

<!DOCTYPE html>
<html>
<body>
  <button id="testBtn">Test</button>
</body>
<script>
    let testBtn = document.querySelector('#testBtn');
    testBtn.onclick = function () {
        alert('Hello world1');
    };

    // 두번째 바인딩된 이벤트 핸들러 (하나의 이벤트 핸들러만 바인딩 가능하기때문에 "Hello world2"가 노출 된다.
    testBtn.onclick = function () {
        alert('Hello world2');
    };
}
</script>
</html>

 

 

3) addEventListener() 방식, attachEvent() 방식
 - 2.2의 프로퍼티 방식에서는 1개의 이벤트 핸들러만 바인딩 가능했지만, 하나 이상의 이벤트 핸들러를 바인딩할 수 있다. 
 - 캡처링과 버블링을 지원한다. (해당 내용은 따로 정리)
 - 문법 : 객체.addEventListener('이벤트타입', 함수명[, 이벤트전파방식]);

    ＊이벤트타입(바인딩될 이벤트의 문자열)

     * 함수명(이벤트리스너)

     * 이벤트전파방식(캡쳐링 사용 여부)

 

※ 사용시 유의점
 - IE 9 이상에서 동작 한다. (IE 8이하에는 attachEvent() 방식을 사용해야 한다.)
 - 프로퍼티로 방식은 "on"이 붙은 이벤트 타입을 사용하지만, addEventListener() 방식은 "on"이 붙지 않은 이벤트 타입을 사용한다.

 

ex)

<!DOCTYPE html>
<html>
<body>
    <button id="testBtn2">Test</button>
</body>
<script>
    let testBtn2 = document.querySelector('#testBtn2');
    function testFunc(){
        alert('Hello world1');
    }
    testBtn2.addEventListener('click', testFunc);

    testBtn2.addEventListener('click', function () {
        alert('Hello world2');
    });
}
</script>
</html>

 

4) removeEventListener()
 - 등록된 이벤트 리스너를 삭제시 사용 가능하다.

 

ex) 

testBtn2.removeEventListener('click', testFunc);

testBtn2.removeEventListener('click', testFunc);

 

이후에는 버블링, 캡쳐링 등 좀더 함수들에대한 활용 방법에 대해 알아 보려 한다.