Untitled_Blue

[Javascript] 이벤트 (Event) 본문

Web/Javascript

[Javascript] 이벤트 (Event)

Untitled_Blue 2023. 8. 6. 21:28
반응형

안녕하세요. 이번 글은 이벤트에 대한 설명입니다.

 

- 이벤트란?

  • 웹 문서 내 태그 요소에 반응하기 위한 일종의 도구
  • 이벤트의 종류는 크게 마우스, 키보드, 문서 로딩, 폼 이벤트로 구성되어 있다.

- 마우스 이벤트 (Mouse Event) - on + Event

종류 설명
click 특정 요소를 클릭할 때 이벤트 발생
dblclick 특정 요소를 더블 클릭할 때 이벤트 발생
mousedown 특정 요소를 클릭하자마자 이벤트 발생
mousemove 특정 요소 내에 마우스의 움직임이 감지될 때 이벤트 발생
mouseover 특정 요소 내에 마우스 커서가 올라갔을 때 이벤트 발생
mouseout 특정 요소 내에 마우스 커서가 벗어났을 때 이벤트 발생
mouseup 특정 요소를 클릭하고 버튼을 떼자마자 이벤트 발생 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 onclick="alert('did you click me?')">Click Me</h1>
    <h1 ondblclick="alert('did you double click me?')">Click Me</h1>
</body>
</html>

다음과 같이 클릭했을 때랑 더블클릭했을 때에 대한 이벤트를 지정할 수 있음을 확인할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>

    <style>
        h3 {
            border: 2px solid slateblue;
        }
    </style>
</head>
<body>
    <h3 onmousedown="alert('버튼을 누르자마자 반응')">Mouse Down</h3>
    <h3 onmousemove="alert('움직이면 반응')">Mouse move</h3>
    <h3 onmouseover="alert('Pointer가 요소 안에 들어오면 반응')">Mouse over</h3>
    <h3 onmouseout="alert('Pointer가 요소 밖을 벗어나면 반응')">Mouse out</h3>
    <h3 onmouseleave="alert('Pointer가 요소 밖을 벗어나면 반응')">Mouse leave</h3>
    <h3 onmouseup="alert('버튼을 눌렀다가 떼자마자 반응')">Mouse up</h3>
</body>
</html>

다음과 같이 MouseDown과 MouseUp의 차이점이 버튼을 누르자마자 반응이 오냐 아니면 버튼을 떼자마자 반응이 오느냐인 점을 확인할 수 있으며 mousemove는 요소 안에서 마우스 커서를 움직일 때 반응이 오며 mouseout과 mouseleave는 마우스 커서가 특정 요소 밖을 벗어나자마자 반응이 오는 점을 확인할 수 있다. 또한 mouseover는 특정 요소 안에 커서가 들어오자마자 반응한다는 점 또한 확인할 수 있다.

- 키보드 이벤트

종류 설명
keydown 키를 누르는 동안 이벤트 발생
keypress 키를 누르자마자 이벤트 발생
keyup 키를 떼자마자 이벤트 발생 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>

    <style>
        h3 {
            border: 2px solid slateblue;
        }
    </style>
</head>
<body>
    <input type="text" onkeydown="alert('키보드를 누르는 동안 이벤트 발생')" placeholder="onkeydown">
    <input type="text" onkeypress="alert('키보드를 눌렀을 떄 이벤트 발생')" placeholder="onkeypress">
    <input type="text" onkeyup="alert('키보드를 떼자마자 이벤트 발생')" placeholder="onkeyup">
</body>
</html>

다음과 같이 키보드에 관한 이벤트는 크게 3가지가 있으며 keydown과 keypress는 키보드를 눌렀을 때 반응한다는 점에서 이벤트의 작동방식이 유사하다는 점을 확인할 수 있다.

- 문서를 로딩할 때 반응하는 이벤트

종류 설명
abort 웹 문서 로딩 완료 전 호출 중단 시 이벤트 발생
error 웹 문서 로딩 중 에러 발생 시 이벤트 발생
load 웹 문서 로딩 완료 시 이벤트 발생
resize 웹 문서 화면 크기 변경 시 이벤트 발생
scroll 웹 문서가 스크롤되었을 때 이벤트 발생
unload 웹 문서에서 벗어날 때 이벤트 발생 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body onload="alert('welcome')">
    
</body>
</html>

다음과 같이 load 이벤트를 통해 페이지의 로딩이 끝나자마자 이벤트가 발생한다는 점을 확인할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body onresize="alert('window size changed alert !')">
</body>
</html>

다음과 같이 웹 문서가 있는 브라우저 창의 크기 변경을 감지할 수 있다는 점을 확인할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <img src="./hello_not.jpg" onerror="alert('Error alert')">
</body>
</html>

다음과 같이 웹 문서를 로딩하는 도중 오류가 발생하면 이벤트가 작동된다는 점을 확인할 수 있으며 웹 문서 중 오류는 파일이 존재하지 않을 때가 보편적이다.

- 폼 이벤트

종류 설명
blur 폼 요소에서 포커스를 잃었을 때 이벤트 발생
focus 폼 요소에 포커스가 주어졌을 때 이벤트 발생
change 목록 또는 체크 상태가 변경되면 이벤트 발생
reset 폼이 리셋되었을 때 이벤트 발생
submit 폼 양식을 제출했을 때 이벤트 발생 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<script>
    function mFocus() {
        document.getElementById("inputting").style.borderBlockColor = "pink"; 
    }
</script>
<body>
    <form action="#" onreset="alert('다시 작성해주세요.')" onsubmit="confirm('제출하시겠습니까?')">
        <input type="text" id="inputting" onfocus="mFocus()" onblur="alert('blur alert')">
        <input type="checkbox" name="first" value="001" onchange="alert('onchange Event Start')">
        <input type="checkbox" name="first" value="002">
        <input type="submit">
        <input type="reset">
    </form>
</body>
</html>

다음과 같이 폼 양식 안에서 다양한 이벤트를 구현할 수 있다는 점을 확인할 수 있다. 상단 코드를 기준으로 제출버튼을 누르면 '제출하시겠습니까?'라는 확인창이 발생하며 초기화 버튼을 누르면 다시 입력하라는 알림창이 나오는 점을 볼 수 있다. 또한 입력창에 포커스가 가면 border 색상이 핑크색으로 바뀐 점을 확인할 수 있고 포커스를 잃으면 알림창이 발생하는 점을 확인할 수 있다. 마지막으로 체크박스에서 선택 또는 선택 해제하자마자 알림창이 onchange 이벤트가 발생하는 점을 확인할 수 있다.

 

다음 글은 객체에 대한 설명입니다. 감사합니다.

반응형

'Web > Javascript' 카테고리의 다른 글

[Javascript] 객체  (0) 2023.08.08
[Javascript] 함수  (0) 2023.08.06
[JAVASCIRPT] 자바스크립트 기본 문법  (0) 2023.07.04
[Javascript] 자바스크립트 기초와 alert(), comfirm(), prompt()  (0) 2023.06.23
'Web/Javascript' Related Articles more