ch5 - 1. 이벤트 기본

Index

Index 1. 이벤트란?2. 이벤트 리스너(event Listener)1) 객체나 요소에 프로퍼티로 등록하기 - HTML 태그에 속성으로 등록하기 - 자바스크립트 코드에서 프로퍼티로 등록하기 2) 객체나 요소에 메소드로 전달하기

1. 이벤트란?

우선적으로 addEventListener에 대한 본격적인 설명 전에, 이벤트란 무엇인지에 대해 짚고 넘어가겠습니다. 이벤트란 '프로그램에 의해 감지되고 처리될 수 있는 동작이나 사건을 말한다.'라고 합니다. Javascript에서도 이와 유사한데요, 사용자가 버튼을 클릭하면 팝업창을 띄우거나, 페이지를 넘기는 경우라고 말할 수 있습니다. 어떤 웹페이지에서 사용자의 버튼 클릭이 감지되면, 이를 처리하기 위해 여러 가지 함수를 사용해서 팝업창을 띄우거나 페이지를 넘깁니다. 그렇다면 어떤 함수를 사용해서 이벤트를 처리해야 하는지 궁금하실 텐데요, 이벤트 리스너가 바로 그 기능을 합니다. 사용자가 특정 이벤트를 발생시켰을 경우 특정 함수를 실행할 수 있게 하는 기능을 가지고 있습니다. 글로만 설명을 하면 헷갈리실 것 같아 코드와 함께 설명해보도록 하겠습니다.


<input type="button" onclick="alert(window.location)" />

event target target은 이벤트가 일어날 객체를 의미하며 위의 코드에선 button 태그에 대한 객체를 의미합니다. event listener 이벤트 핸들러(event handler)라고도 하며 이벤트가 발생했을 때 동작하는 코드를 의미합니다. 위 코드에서는 alert(window.location)이 실행됩니다. event type 이벤트의 종류를 의미합니다. mousedown, mouseover 등 여러 개의 이벤트 종류가 있는데요, 위의 코드에서는 click이 이벤트 타입입니다. 다음 표는 자주 사용하는 이벤트들을 모아 보았습니다.

더 많은 이벤트들이 궁금하시면 다음 링크를 참고하세요 (https://developer.mozilla.org/en-US/docs/Web/Events)

2. 이벤트 리스너(event Listener)

이벤트 리스너란 이벤트가 발생했을 때, 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)와도 같은 의미입니다. 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킵니다.

1) 객체나 요소에 프로퍼티로 등록하기

- HTML 태그에 속성으로 등록하기

inline 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것입니다. inline 방식은 태그에 이벤트가 포함되기 때문에 이벤트의 소재를 파악하는 것이 편리하지만 정보인 HTML과 제어인 JavaScript가 혼합된 형태이기 때문에 좋은 방법은 아닙니다.


<input type="button" onclick="alert('Hello world');" value="button" />

- 자바스크립트 코드에서 프로퍼티로 등록하기

프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이며 인라인 방식에 비해서 HTML과 JavaScript를 분리할 수 있다는 점에서 선호되는 방식입니다.


<input type="button" id="target" value="button" />
<script>
    var hello = document.getElementById('target');
    hello.onclick = function(){
        alert('안녕하세요'); 
    }
</script>

2) 객체나 요소에 메소드로 전달하기

addEventListener는 여러 개의 이벤트 리스너를 등록할 수 있기 때문에 이벤트를 등록하는 가장 권장된 방식입니다.


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

주의해야 할 점은 인터넷 익스플로어8 버전 이하에서는 적용이 되지 않으므로 attachEvent 메소드를 사용해야 합니다.


var btn = document.getElementById('target');
if(btn.addEventListener){
    btn.addEventListener('click', function(event){
        alert('Hello world'+event.target.value);
    }); 
} else if(btn.attachEvent){
    btn.attachEvent('onclick', function(event){
        alert('Hello world'+event.target.value);
    })
}