Javascript 의 이벤트

김병욱·2020년 4월 2일

Event JavaScript Javascriptevent Javascript이벤트 이벤트 자바스크립트 자바스크립트이벤트

Javascript

목록 보기

7/8

학습자료

생활코딩 자바스크립트

이벤트

이벤트는 어떤 사건을 의미한다. 브라우저에서의 사건이란 클라이언트가 클릭했을때, 스크롤을 했을때, 필드의 내용을 바꾸었을 때 등을 의미한다.

event target

target은 이벤트가 일어날 객체를 의미한다.(버튼등..)

event type

이벤트 종류를 의미한다. click 이나 scroll, mousemove 등이 존재한다.
이벤트 종류는 이미 약속되어 있다. 아래의 링크는 브라우저에서 지원하는 이벤트 종류를 보여준다.
https://developer.mozilla.org/en-US/docs/Web/Reference/Events

event handler

이벤트가 발생했을 때 동작하는 코드를 의미한다.

이벤트 등록 방법

inline 방식

이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다.

<input type="button" value="button" />

프로퍼티 리스너

이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다. 인라인 방식에 비해 HTML과 Javascript를 분리할 수 있다는 점에서 선호하는 방식이지만 뒤에서 배울 addEventListener 방식을 춴한다

<input type="button" id="target" value="button" />
<script>
    var t = document.getElementById('target');
    t.onclick = function(){
        alert('Hello world');
    }
</script>

이벤트 객체
이벤트가 실행된 맥락의 정보가 필요할때는 이벤트 객체를 사용한다. 이벤트 객체는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달된다.

<body>
    <input type="button" id="target" value="button" />
<script>
    var t = document.getElementById('target');
    t.onclick = function(event){
        alert('Hello world, '+event.target.value)
    }
</script>

addEventListener 방식

가장 권장되는 이벤트 등록 방식이다. 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록할 수 있다.

<input type="button" id="target" value="button" />
<script>
    var t = document.getElementById('target');
    t.addEventListener('click', function(event){
        alert('Hello world, '+event.target.value);
    });
</script>

이방식의 중요한 장점은 하나의 이벤트 대상에 복수의 동일 이벤트 타입 리스너를 등록할 수 있다는 점이다.

<input type="button" id="target" value="button" />
<script>
    var t = document.getElementById('target');
    t.addEventListener('click', function(event){
        alert(1);
    });
    t.addEventListener('click', function(event){
        alert(2);
    });
</script>

기본 동작의 취소

웹브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다.

텍스트 필드에 포커스를 준 상태에서 키보드를 입력하면 텍스트가 입력된다.
폼에서 submit 버튼을 누르면 데이터가 전송된다.
a 태그를 클릭하면 href 속성의 URL로 이동한다.

이러한 기본적인 동작들을 기본 이벤트라고 하는데 사용자가 만든 이벤트를 이용해서 이러한 기본 동작을 취소할 수 있다.

inline 이나 property 방식은 리턴값이 false 이면 기본동작이 취소된다.

* inline 방식

<p>
    <label>prevent event on</label><input id="prevent" type="checkbox" name="eventprevent" value="on" />
</p>
<p>
    <a href="http://opentutorials.org" onclick="if(document.getElementById('prevent').checked) return false;">opentutorials</a>
</p>
<p>
    <form action="http://opentutorials.org" onsubmit="if(document.getElementById('prevent').checked) return false;">
            <input type="submit" />
    </form>
</p>

* property 방식

<p>
    <label>prevent event on</label><input id="prevent" type="checkbox" name="eventprevent" value="on" />
</p>
<p>
    <a href="http://opentutorials.org">opentutorials</a>
</p>
<p>
    <form action="http://opentutorials.org">
            <input type="submit" />
    </form>
</p>
<script>
    document.querySelector('a').onclick = function(event){
        if(document.getElementById('prevent').checked)
            return false;
    };
     
    document.querySelector('form').onclick = function(event){
        if(document.getElementById('prevent').checked)
            return false;
    };
 
</script>

addEventListener 방식에서는 preventDefault 메소드를 실행하면 기본동작이 취소된다.

* addEventListener 방식

		<p>
            <label>prevent event on</label><input id="prevent" type="checkbox" name="eventprevent" value="on" />
        </p>
        <p>
            <a href="http://opentutorials.org">opentutorials</a>
        </p>
        <p>
            <form action="http://opentutorials.org">
                    <input type="submit" />
            </form>
        </p>
        <script>
            document.querySelector('a').addEventListener('click', function(event){
                if(document.getElementById('prevent').checked)
                    event.preventDefault();
            });
             
            document.querySelector('form').addEventListener('submit', function(event){
                if(document.getElementById('prevent').checked)
                    event.preventDefault();
            });
 
        </script>

이벤트 타입

submit

폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다.
form 태그에 적용된다.
아래 예제는 전송 전에 텍스트 필드에 값이 입력되었는지를 확인한다. 값이 입력되지 않았다면 전송을 중단한다.

<form id="target" action="result.html">
    <label for="name">name</label> <input id="name" type="name" />
    <input type="submit" />
</form>
<script>
var t = document.getElementById('target');
t.addEventListener('submit', function(event){
    if(document.getElementById('name').value.length === 0){
        alert('Name 필드의 값이 누락 되었습니다');
        event.preventDefault();
    }
});
</script>

change

change는 폼 컨트롤 값이 변경 되었을 때 발생하는 이벤트다.
input(text,radio,checkbox),textarea,select 태그에 적용된다.

<p id="result"></p>
<input id="target" type="name" />
<script>
var t = document.getElementById('target');
t.addEventListener('change', function(event){
    document.getElementById('result').innerHTML=event.target.value;
});
</script>

blur, focus

focus는 엘리먼트에 포커스가 생겼을 때, blur는 포커스가 사라졌을 때 발생하는 이벤트다.
다음 태그를 제외한 모든태그에서 발생한다. <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title>

<input id="target" type="name" />
<script>
var t = document.getElementById('target');
t.addEventListener('blur', function(event){
    alert('blur');  
});
t.addEventListener('focus', function(event){
    alert('focus'); 
});
</script>

문서의 로딩

웹페이지를 프로그래밍적으로 제어하기 위해서는 웹페이지의 모든 요소에 대한 처리가 끝나야 한다. 이것을 알려주는 이벤트가 load, DOMContentLoaded이다.

아래 코드의 실행결과는 null이다. <p id="target">Hello</p>가 로딩되기 전에 자바스크립트가 실행되었기 때문이다.

<html>
    <head>
        <script>
        var t = document.getElementById('target');
        console.log(t);
        </script>
    </head>
    <body>
        <p id="target">Hello</p>
    </body>
</html>

이를 해결하는 방법은 스크립트 코드를 문서 끝에 위치시키는 것이다.

<p id="target">Hello</p>
<script>
    var t = document.getElementById('target');
    console.log(t);
</script>

또 다른 방법은 load 이벤트를 사용하는 것이다.

<head>
    <script>
        window.addEventListener('load', function(){
            var t = document.getElementById('target');
            console.log(t);
        })
    </script>
</head>
<body>
    <p id="target">Hello</p>
</body>

그런데 load 이벤트는 문서내의 모든 리소스(이미지, 스크립트)의 다운로드가 끝난 후에 실행된다. 이것을 에플리케이션의 구동이 너무 지연되는 부작용을 초래할 수 있다.

DOMContentLoaded는 문서에서 스크립트 작업을 할 수 있을 때 실행되기 때문에 이미지 다운로드를 기다릴 필요가 없다.

<html>
    <head>
        <script>
            window.addEventListener('load', function(){
                console.log('load');
            })
            window.addEventListener('DOMContentLoaded', function(){
                console.log('DOMContentLoaded');
            })
        </script>
    </head>
    <body>
        <p id="target">Hello</p>
    </body>
</html>

마우스

click : 클릭했을 때
dbclick : 더블클릭 했을 때
mouserdown : 마우스를 누를 때
mouseup : 마우스버튼을 땔 때
mousemove : 마우스를 움직일 때
mouseover : 마우스가 엘리먼트에 진입할 때
mouseout : 마우스가 엘리먼트에서 빠져나갈 때
contextmenu : 컨텍스트메뉴가 실행될 때

마우스 + 키보드 조합

마우스 이벤트가 호출될 때 특수키(alt, ctrl, shift)가 눌려진 상태를 감지해야 한다면 이벤트 객체의 프로퍼티를 사용한다. 이 때 사용하는 프로퍼티는 아래와 같다.

event.shiftKey
event.altKey
event.ctrlKey

마우스 포인터 위치

마우스 이벤트와 관련한 작업에서는 마우스 포인터의 위치를 알아내는 것이 중요할 때가 있는데 이런 경우 이벤트 객체의 clientX와 clientY를 사용한다.

김병욱

개발스터디

이전 포스트

Javascript 의 Node, Text 객체

다음 포스트