Programming Language/JavaScript

[JavaScript] 이벤트와 이벤트 처리기

이벤트란?

이벤트란 키보드에서 키를 누르는 것이나, 브라우저가 웹 페이지를 불러오는 것처럼 사용자가 행하는 동작을 이벤트라고 합니다.
하지만 이벤트는 웹 문서 영역 안에서 이루어지는 동작들만을 말하는 것이니 이 점 유의하시길 바랍니다.

마우스 이벤트

먼저 마우스를 동작하였을 때의 이벤트를 살펴보도록 하겠습니다.

click : 사용자가 HTML 요소를 클릭할 때 이벤트가 발생합니다
dbclick : 사용자가 HTML 요소를 더블클릭 했을 때 이벤트가 발생합니다
mouseover : 마우스 포인터가 요소 위에 옮겨질 때 이벤트가 발생합니다
mouseout : 마우스 포인터가 요소를 벗어날 때 이벤트가 발생합니다

폼 이벤트

Form 은 로그인창이나 검색창처럼 정보를 입력하는 요소들을 말합니다. 폼 요소에 내용을 입력하면서 발생할 수 있는 이벤트에 대해 알아보도록 하겠습니다

blur: 폼 요소에 포커스를 잃었을 때 이벤트가 발생합니다.
change: 목록이나 체크 상태 등이 변경되었을 때 이벤트가 발생합니다.
- input, select, textarea, button 태그에서 사용됩니다
focus: 폼 요소에 포커스가 놓였을 때 사용합니다
- label, select, textarea, button 태그에서 사용됩니다
reset: 폼이 다시 시작되었을 때 이벤트가 발생합니다

키보드 이벤트

키보드에서 특정 키를 조작할 때 발생하는 이벤트 입니다

keypress: 사용자가 키를 눌렀을 때 이벤트가 발생합니다
keydown: 사용자가 키를 누루는 동안 이벤트가 발생합니다
keyup: 사용자가 키에서 손을 뗄 때 이벤트가 발생합니다

문서 로딩 이벤트

웹이 로딩중이거나, 스크롤 하였을 때의 이벤트들 입니다.

abort: 웹 문서가 완전리 로딩되기 전에 이벤트가 발생합니다
error: 문서가 정확히 로딩되지 않았을 때 이벤크가 발생합니다
scroll: 화면이 스크롤되었을 때 이벤트가 발생합니다

HTML 태그에 적용해보기

다음 과제에서 js로 이벤트를 다룰 것이기 때문에 생략하셔도 좋습니다.

하지만 직접 실습을 해보면 이벤트에 무엇이 있었는지 기억하고 이해하기 쉽겠죠?

<html lang="en">
<head>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            align-content: space-around;
        }

        body .btn {
            margin: 10px;
            width: 200px;
            height: 50px;
        }
    </style>
    <title>Event Study</title>
</head>
<body>
    <input type="button" value="click" class="btn" onclick="alert('click')">
    <input type="button" value="over" class="btn" onmouseover="alert('mouseover!')">
    <input type="button" value="double click" class="btn" ondblclick="alert('dbclick!')">
</body>
</html>

위 코드를 복사하여 실습하시길 바랍니다!

<input type="button" value="click" class="btn" onclick="alert('click')">
<input type="button" value="over" class="btn" onmouseover="alert('mouseover!')">
<input type="button" value="double click" class="btn" ondblclick="alert('dbclick!')">

이벤트 리스너가 사용된 부분은 이 코드들 입니다.

HTML에서 이벤트 리스너를 사용하기 위해서는 태그의 속성으로 on+이벤트이름을 작성하셔야 합니다

다음 과제에서 js로 이벤트 리스너를 다룰 것이기 때문에 이번 과제에서는 어떤 이벤트들이 있는지만 파악하셔도 충분합니다~

HTML파일을 사용하면 다음과 같이 버튼 세개가 보이실겁니다.

click 버튼을 클릭하면 onclick 이벤트가 활성화 되므로 alert() 함수가 실행됩니다.

over과 double click 버튼도 마찬가지로 이벤트가 활성화 되자 따옴표 안의 함수 alert()이 실행됩니다.

여러분 사실 이벤트는 이 게시물에 있는 것 말고도 아주 많습니다.

더 많은 이벤트들은 https://developer.mozilla.org/en-US/docs/Web/Events 여기서 확인할 수 있습니다

이번 과제는 실습이 별로 없어 재밌진 않았을텐데...

토이프로젝트를 완성하기 위한 중요한 과제 중 하나이니 조금 무료함을 견디시길 바랍니다

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript] 데이터 단위 변환기 토이 프로젝트 만들어보기 (0)	2023.05.06
[JavaScript] DOM 객체로 HTML 요소의 속성 바꾸기 (0)	2023.05.05
[JavaScript] DOM 객체와 이벤트 처리 (1)	2023.04.28
[JavaScript] 익명 함수, 즉시 실행 함수, 다양한 함수의 표현법 알기 (0)	2023.04.23
[JavaScript] 자바 스크립트의 함수 알기 (0)	2023.04.22

Contents

새소식

인기 검색어