[ javascript ] 12. 이벤트 종류와 작성법

# 자바스크립트 이벤트 

 

Mouse Event

Event	설명
click	마우스 버튼을 클릭했을 때
dbclick	마우스 버튼을 더블 클릭했을 때
mousedown	마우스 버튼을 누르고 있을 때
mouseup	누르고 있던 마우스 버튼을 뗄 때
mousemove	마우스를 움직일 때
mouseover	마우스를 요소 위로 움직였을 때
mouseout	마우스를 요소 밖으로 움직였을 때
mouseenter	해당 요소에 마우스 커서를 올려다놓았을때
mouseleave	해당 요소에 마우스 커서를 빼낼때

 

Keyboard Event

Event	설명
keydown	키를 누르고 있을 때
keyup	누르고 있던 키를 뗄 때
keypress	키를 누르고 뗏을 때
keyCode	키 코드값 , mdn

 

Focus Event

Event	설명
focus/focusin	요소가 포커스를 얻었을 때
blur/foucusout	요소가 포커스를 잃었을 때

 

Form Event

Event	설명
input	input 또는 textarea 요소의 값이 변경되었을 때
contenteditable	어트리뷰트를 가진 요소의 값이 변경되었을 때
change	select box, checkbox, radio button의 상태가 변경되었을 때
submit	form을 submit할 때

 

UI Event

Event	설명
load	웹페이지나 스크립트의 로드가 완료되었을 때
unload	웹페이지가 언로드될 때(주로 새로운 페이지를 요청한 경우)
error	브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우
resize	브라우저 창의 크기를 조절했을 때
scroll	사용자가 페이지를 위아래로 스크롤할 때
select	텍스트를 선택했을 때

 

Clipboard Event

Event	설명
cut	콘텐츠를 잘라내기할 때
copy	콘텐츠를 복사할 때
paste	콘텐츠를 붙여넣기할 때

 

이벤트 작성방법 1

<input type="button" onclick="alert('안녕 자바스크립트');" value="button" />

 

이벤트 작성방법 2

<button class="btn">Click me</button>
<script>
    let btn = document.querySelector('.btn');
    
    btn.onclick = function() {
        alert('안녕 자바스크립트');
    };   
</script>

 

이벤트 작성방법 3

element.addEventListener(type,eventListener);
element.addEventListener(이벤트타입,이벤트콜백함수);

element.removeEventListener('이벤트타입', function() {
	 실행문;
})

addEventListener 메서드를 이용하여 대상 DOM 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백 함수(이벤트 핸들러)를 지정합니다.

 

<input type="button" id="btn" value="button" >

<script>
   let btn = document.getElementById('btn');
    btn.addEventListener('click', function(){
        alert('안녕 자바스크립트');
    });
</script>

 

이벤트 제거

element.removeEventListener('이벤트타입', 이벤트 콜백 함수)

let btn = document.querySelector('#btn');

btn.addEventListener('click',function() {
   alert('이벤트등록!');
});
btn.removeEventListener('click', function() {
   alert('이벤트제거!');
});

let btn = document.querySelector('#btn');


let showAlert = function() {
    alert('확인!');
};

// add the event listener
btn.addEventListener('click', showAlert);

// remove the event listener
btn.removeEventListener('click', showAlert);

 

이벤트 한 번만 실행

eventTarget.addEventListener('click', function() {
  alert('한번만 실행!!');
}, { once : true }

 

 

 

마우스 이벤트(MouseEvent) 객체

프로퍼티	설명
clientX, clientY	콘텐츠를 잘라내기할 때
pageX, pageY	마우스 커서의 문서 영역에서의 위치
offsetX, offsetY	마우스 포인터의 이벤트 발생한 요소에서의 위치
screenX, screenY	마우스 포인터의 모니터 화면 영역에서의 위치

 

 

clientX, clientY

client 프로퍼티는 말 그대로 클라이언트 영역 내에서 마우스의 좌표 정보를 담고 있는데  클라이언트 영역이란 이벤트가 발생한 순간에 브라우저가 콘텐츠를 표시할 수 있는 영역을 뜻합니다.

clientX : 브라우저가 표시하는 화면 내에서 마우스의 X좌표 위치를 담고 있습니다. 

clientY : 브라우저가 표시하는 화면 내에서 마우스의 Y좌표 위치를 담고 있습니다.
client 값은 그 순간 보여지는보이는 화면을 기준으로 계산하기 때문에 스크롤 위치와는 무관하게 항상 보이는 화면의 좌측 상단의 모서리 위치를 (0, 0)으로 계산합니다.

 

offsetX, offsetY

offset 프로퍼티는 이벤트가 발생한 target이 기준이 됩니다.
offsetX : 이벤트가 발생한 target 내에서 마우스의 X좌표 위치를 담고 있습니다. 

offsetY : 이벤트가 발생한 target 내에서 마우스의 Y좌표 위치를 담고 있습니다.
offset값도 이벤트가 발생한 대상을 기준으로 계산하기 때문에 스크롤 위치와는 무관하게 항상 대상의 좌측 상단의 모서리 위치를 (0, 0)으로 계산합니다.

 

pageX, pageY

page 프로퍼티는 전체 문서를 기준으로 마우스 좌표 정보를 담고 있습니다. 그렇기 때문에 스크롤로 인해서 보이지 않게 된 화면의 영역까지 포함해서 측정한다는 점이 앞의 두 프로퍼티와의 차이점입니다.
pageX : 전체 문서 내에서 마우스의 X좌표 위치를 담고 있습니다. 

pageY : 전체 문서 내에서 마우스의 Y좌표 위치를 담고 있습니다.