이벤트란?
이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다. 먼저 이러한 이벤트들에 관한 용어들을 정리하고 가도록 하겠다.
event target
target은 이벤트가 일어날 객체를 의미한다. 예를 들어 버튼을 누르면 새로운 창이 열리는 객체가 있다고 하자. 그렇다면 여기서 버튼은 event target이 된다.
event type
이벤트의 종류를 의미한다. 위의 예에서는 click이 이벤트의 타입이 된다. 그 외에도 스크롤이나 마우스가 움직였을 때 발생하는 것들도 이벤트 타입이다.
event handler
이벤트가 발생했을 때 동작하는 코드를 의미한다.
이벤트 등록방법
inline
인라인(inline) 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다.
<input type="button" onclick="alert('Hello world');" value="button" />
이벤트가 발생한 대상을 필요로하는 경우 this를 통해서 참조할 수 있다.
// 자기 자신을 참조하는 불편한 방법
<input type="button" id="target" onclick="alert('Hello world, '+document.getElementById('target').value);" value="button" />
// this를 통해서 간편하게 참조할 수 있다
<input type="button" onclick="alert('Hello world, '+this.value);" value="button" />
property listener
<input type="button" id="target" value="button" />
<script>
var t = document.getElementById('target');
t.onclick = function(){
alert('Hello world');
}
</script>프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다. 인라인 방식에 비해서 HTML과 JavaScript를 분리할 수 있다는 점에서 선호되는 방식이지만 뒤에서 배울 addEventListener 방식을 추천한다.
이벤트 객체
이벤트가 실행된 맥락의 정보가 필요할 때는 이벤트 객체를 사용한다. 이벤트 객체는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달된다.
<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>
하지만 이러한 방식은 internet explore8 이하에서는 동작하지 않는다.
addEventListener()
addEventListener은 이벤트를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러 개의 이벤트 핸들러를 등록할 수 있다. (해당 방식은 internet explore8 이하에서는 호환되지 않는다.)
<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>
3번 라인에서 getElementById로 html에서 target이라는 id를 갖고 있는 객체를 t변수에 리턴한다.
그리고 t는 addEventListener()를 호출하고 첫 번째 인자로 event type을 받는다. 그리고 첫 번째 인자의 이벤트가 수행되었을 때 두 번째 인자로 받은 함수가 호출되면서 함수 내에 있는 코드가 실행된다.
'Language > Javascript (Typescript)' 카테고리의 다른 글
| [Javascript] Tutorial(1): 자바스크립트 개요 (2) | 2020.03.01 |
|---|---|
| [Javascript] Ajax 통신 (0) | 2019.10.10 |
| [Javascript] DOM(document object model) (0) | 2019.10.10 |
| [Javascript] BOM(browser object model) (0) | 2019.10.10 |
| [Javascript] Object Model : 브라우저를 제어하는 자바스크립트 (0) | 2019.10.10 |