자바스크립트 기초-6 이벤트

## 이벤트 (상태의 변화)
- 일반적으로는 프로그래밍적으로 어떤 사건이 일어난 순간을 의미
- 자바스크립에서의 이벤트란 브라우져에서 발생하는 사건들(클릭, 스크롤, 페이지전환 등등)
- 이벤트가 발생했을 때 실행될 로직을 작성한다.
- 이벤트는 태그에 기술하는 인라인(inline)방식과 리스너(Listener)방식이 있다.

## inline 방식

<script type="text/javascript">

function gogogo(){

alert('push');

}

</script>

<input type="button" value="push" onclick="gogogo()"></input>

<select onchange="alert(this.value)">

<option value="1">one</option>

<option value="2">two</option>

<option value="3">three</option>

</select>

## listener 방식 : listener방식은 하나의 엘리먼트에 여러개의 이벤트 핸들러를 걸수있다. 브라우저간의 호환성을 위해서 조건문을 사용했다. 이러한 기법을 크로스브라우징이라고 한다.

<input type="text" id="test" />

<script type="text/javascript">

// id test인 텍스트 필드를 가져온다

var test = document.getElementById('test');

//이벤트 핸들러

function testHandler(){

alert('blur');

}

//attachEvent는 ie에서만 지원하기 때문에 attachEvent가 지원되는지 확인하기 위해서 조건문을 사용

if (test.addEventListener) // W3C DOM

test.addEventListener('blur',testHandler,false);

else if (test.attachEvent) // IE DOM

var r = test.attachEvent("on"+'blur', testHandler);

//이벤트 핸들러2

function testHandler2(){

alert('blur2');

}

if (test.addEventListener) // W3C DOM

test.addEventListener('blur',testHandler2,false);

else if (test.attachEvent) // IE DOM

var r = test.attachEvent("on"+'blur', testHandler2);

</script>

## addEventListener와 attachEvent
: 메소드명 그대로, EventListener를 추가해 주는 역할.
- IE에서는 attachEvent만 지원하고, 반면에, FF에서는 addEventListener만을 지원.
- addEventListener는 이벤트를 받을 때 event명으로 가며, attachEvent는 이벤트를 받을 때 "on"+event명 으로 감.
- addEventListener는 return값을 넣어주어야 한다.

ex1) window.addEventListener("load", test.alertTest, false);

ex2) window.attachEvent("onload", test.alertTest);