[JS] Javascript - Event 종류(mouse, keyboard events)

자바스크립트에서는 사용하는 이벤트는 일반적으로 4가지로 분류된다.

mouse events, keyboard events, form events, document/windows events가 있는데,

이번에는 mouse event, keyboard event에 대해 알아보자.

 

이벤트 핸들러 종류이다.

Event	handler	설명
mouse events	onClick	마우스 버튼을 클릭
	onDbclick	마우스 버튼을 더블클릭
	onMouseover	마우스 포인터가 요소 위에 올라갔을 때
	onMouseout	마우스 포인터가 요소 안에서 요소 밖으로 벗어날 때
keyboard events	onKeydown	키보드의 키를 눌렀을때
	onKeyup	키보드의 키를 눌렀다 떼는 때
	onKeypress	키보드의 키를 눌러 문자가 연결될 때

 

 

Mouse events

 

마우스 이벤트는 유저가 요소를 클릭하거나 마우스오버하는 것과 같은 동작으로 트리거를 발생시키는 것을 말한다.

 

mouseout event(onmouseout)

마우스를 element에 두고 다른곳으로 움직일 때 이벤트를 발생시키는 이벤트이다.

버튼을 만들어두고, 자바스크립트 파일에 아래와 같은 코드를 입력하면

function mouseMoveOut() {
    alert("움직이지 마라고!");
}
document.getElementById("onmyBtn").onmouseout = mouseMoveOut;

 

반대로 mouseover event(onmouseover) 를 사용하고 싶다면 

---

 Keyboard events

키보드 이벤트는 키보드를 누르거나 뗄떼, 타이핑할때와 같은 동작으로 이벤트를 발생시킬 수 있다.

 

Keydown Event (onkeydown)

키보드 누를때 이벤트 발생

 

 

 

 

 

 

 

 

 

---

 

 

이벤트가 뭔지 모르겠다면 아래 포스팅 참고

2021.12.29 - [🎪 놀고있네/Javascript] - [JS] Javascript - Event

[JS] Javascript - Event