본문 바로가기
Java Script

Java Script-이벤트

by Hrin_0820 2020. 12. 14.

1. 주요 이벤트

▶ 마우스 이벤트

이벤트 설명
click  마우스를 클릭했을 때 이벤트 발생
dbclick  마우스를 더블클릭했을 때 이벤트 발생
mouseover  마우스를 오버했을 때 이벤트 발생
mouseout  마우스를 아웃했을 때 이벤트 발생
mousedown  마우스를 눌렸을 때 이벤트 발생
mouseup  마우스를 떼었을 때 이벤트 발생
mousemove  마우스를 움직였을 때 이벤트 발생

▶ 키 이벤트

이벤트 설명
keydown  키를 눌렸을 때 이벤트 발생
keyup  키를 떼었을 때 이벤트 발생
keypress  키를 누른 상태에서 이벤트 발생

▶ 폼 이벤트

이벤트 설명
focus  포커스가 이동되었을 때 이벤트 발생
blur  포커스가 벗어났을 때 이벤트 발생
change  값이 변경되었을 때 이벤트 발생
submit  submit 버튼을 눌렀을 때 이벤트 발생
reset  reset 버튼을 눌렀을 때 이벤트 발생
select  input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생

▶ 로드, 기타 이벤트

이벤트 설명
load  로딩이 완료되었을 때 이벤트 발생
abort  이미지의 로딩이 중단되었을 때 이벤트 발생
resize  사이즈가 변경되었을 때 이벤트 발생
scroll  스크롤바를 움직였을 때 이벤트 발생

2. 이벤트 연결

▶ 인라인 이벤트 모델 : html 요소에 직접 이벤트를 연결하는 방식

	<button onclick="console.log('ok')">OK 버튼</button>

출력 이미지

▶ 기본 이벤트 모델 : '객체의 메서드' 형식( 객체.메서드 = function( ){ ... } )으로 연결하는 방식

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>기본 이벤트 모델</title>
    <script>
        window.onload = function(){
            var bt=document.getElementById('bt'); // 요소 취득 명령어
            bt.onclick = function(){
                console.log('ok');
            }
        }
    </script>
</head>
<body>
    <button id="bt">OK 버튼</button>
</body>
</html>

출력 이미지

▶ 표준 이벤트 모델 : 객체.addEventListener( '이벤트', 함수)의 방식으로 연결하는 방식

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>표준 이벤트 모델</title>
    <script>
        window.onload = function(){
            var bt=document.getElementById('bt'); // 요소 취득 명령어
            function view() {
                console.log('ok');
            }
            bt.addEventListener('click', view); // 이벤트에 on을 붙이지 않습니다
        };
    </script>
</head>
<body>
    <button id="bt">OK 버튼</button>
</body>
</html>

출력 이미지

3. 이벤트 객체

이벤트 객체는 자바스크립트에서 기본적으로 제공해 주는 객체입니다.

이벤트 객체를 이용하면 마우스를 클릭했을 때 클릭한 좌표 값이라든지 이벤트를 발생시킨 객체가 어떤것인지 등에 대한 정보 값을 쉽게 얻을 수 있다.

 bt.onclick = function(event) {
     event.프로퍼티
     event.메서드
 }

익명함수의 매개 변수 event가 이벤트 객체를 의미합니다. 변수명을 반드시 'event'로 사용할 필요는 없으나, 보통 이벤트 객체의 의미로 많이 사용한다.

 

▶ 이벤트 객체 주요 프로퍼티

프로퍼티 설명
target  이벤트를 발생시킨 객체를 반환
type  이벤트의 이름을 반환
clientX  이벤트가 발생한 X좌표 값을 반환 (브라우저 기준)
clientY  이벤트가 발생한 Y좌표 값을 반환 (브라우저 기준)
screenX  이벤트가 발생한 X좌표 값을 반환 (모니터 기준)
screenY  이벤트가 발생한 Y좌표 값을 반환 (모니터 기준)
button  마우스 왼쪽( 0 ), 가운데( 1 ), 오른쪽( 2 ) 버튼 값을 반환 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>이벤트 속성</title>
    <style>
        div {
            height: 100px;
            background: mediumpurple;
            margin-top: 20px;
            color: #fff;
        }
    </style>
    <script>
        window.onload = function() {
            var bt = document.getElementById('bt') ;
            var area = document.getElementById('area');
            bt.onclick = function(event) {
                console.log(event.target);
                console.log(event.type);
                console.log(event.clientX);
                console.log(event.clientY);
                console.log(event.screenX);
                console.log(event.screenY);
            };
            area.onmousedown = function(event) {
                console.log(event.button);
            };
        };
    </script>
</head>
<body>
    <button id="bt">클릭</button>
    <div id="area">여기에 마우스 왼쪽, 가운데, 오른쪽 버튼 클릭</div>
</body>
</html>

출력 이미지

▶ 이벤트 객체 주요 메서드

메서드 설명
preventDefault( )  기본 이벤트의 실행을 막아 줍니다.
stopPropagation( )  이벤트 버블링을 방지해 줍니다.

 

저작자표시

'Java Script' 카테고리의 다른 글

Java Script-BOM(Browser Object Model)  (0) 2020.12.14
Java Script-내장 객체 2( Math, Date, 정규표현식(RegExp) )  (0) 2020.12.14
Java Script-내장 객체 1 (Number, String, Array)  (0) 2020.09.22
Java Script-사용자 정의 객체  (0) 2020.09.21
Java Script-함수  (0) 2020.09.17

관련글

댓글

티스토리툴바