[JavaScript] onClick, addEventListener 이벤트 비교

이벤트 리스너는 이벤트가 발생했을때 처리를 담당하는 함수로, 이벤트 핸들러(event handler)라고도 불립니다.

 

특정 element에서 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킵니다.

 

가장 보편적으로 많이 사용되는 click 이벤트로 예시를 들어보겠습니다.

 

 

1. HTML에서 이벤트 등록

HTML 태그안에서 onclick을 입력하여 클릭이벤트를 등록하는 방법

<button onclick="alert('hello')">버튼</button>

 

2. JavaScript를 이용해서 onclick 이벤트 등록

스크립트에서 onclick 속성을 추가해서 이벤트를 등록하는 방법

하나의 이벤트 리스너만 등록이 가능합니다.

<div class="btn1" id="btn2"></div>

<script>
	const btn = document.querySelector('#btn2');
	btn.onclick = function() {
		alert("hello");
	}
</script>

 

3. addEventListener() 메서드

스크립트에서 click 동작으로 이벤트를 등록하는 방법 

addEventListener() 메서드는 익스플로어6,7,8 에서는 지원되지 않습니다.

<div class="btn1" id="btn2"></div>

<script>
	const btn = document.querySelector('#btn2');
	btn.addEventListener("click",function(){
		alert("hello");
	});
</script>

 

 

사용자의 브라우저 버전에 따라 방법을 달리 해야할것같다!
주 고객층이 옛날 버전(익스플로어6,7,8..?)을 많이 사용한다면 addEventListener()의 사용은 자제하는걸로...