addEventListener()

addEventListener은 이벤트를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록할 수 있다.

<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>

이 방식은 ie8이하에서는 호환되지 않는다. ie에서는 attachEvent 메소드를 사용해야 한다. 

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

이 방식의 중요한 장점은 하나의 이벤트 대상에 복수의 동일 이벤트 타입 리스너를 등록할 수 있다는 점이다. 

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

이벤트 객체를 이용하면 복수의 엘리먼트에 하나의 리스너를 등록해서 재사용할 수 있다. 

<input type="button" id="target1" value="button1" />
<input type="button" id="target2" value="button2" />
<script>
    var t1 = document.getElementById('target1');
	var t2 = document.getElementById('target2');
	function btn_listener(event){
		switch(event.target.id){
			case 'target1':
				alert(1);
				break;
			case 'target2':
				alert(2);
				break;
		}
	}
	t1.addEventListener('click', btn_listener);
	t2.addEventListener('click', btn_listener);
</script>