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를 하나만 생성해서 재활용 할 수 있음
