[12/13] 이벤트 등록

[출처] 생활코딩 http://opentutorials.org/module/904/6760

inline

---

_ 이벤트가 발생한 대상을 필요로 하는 경우 this를 통해서 참조 (이벤트가 동작하고 있는 Element를 가리킴)

ex) <input type="button" id="target" onclick="alert('Hello world, ' + this.value)"; value="button" />

_ 장점 : 태그에 직접기술되어 찾기 쉽다

_ 단점 : javascript가 html(정보)에 혼재되어 있기 때문에 관리가 어렵다. 속성안에 작성하기 때문에 복잡한 코드 작성이 어렵다

property listener

---

_ 이벤트 객체는 이벤트가 실행될 때 이벤트 핸들러의 인자로 전달된다

_ 현재 발생한 이벤트에 대한 다양한 정보를 얻을 수 있다

_ event.target : 이벤트 발생시점에서 이벤트 발생 지점을 확인

_ IE8이하 버전에서는 event 객체를 핸들러 객체의 인자가 아닌 전역객체로 제공한다

ex) window.event 

_ IE8이하 버전 대응을 위한 코드 예시 

var event = event || window.event

_IE8이하 버전에서는 event.target 대신 event.srcElement를 제공

var taget = event.target || event.srcElement

addEventListener()

---

_ 이벤트 등록하는 가장 권장되는 방식.

_ 위 객체가 click 이벤트가 발생했을 때, 두번째 인자로 전달한 이벤트 리스너가 동작하면서 event 객체를 반환한다.

_ ie8이하 호환 예제, ie8이하에서는 attachEvent 사용.

_ addEventListener의 장점의 경우 복수의 동일 이벤트 타입 리스너를 등록할 수 있음

_ eventListener를 하나만 생성해서 재활용 할 수 있음