자바스크립트 - onclick / addEventListener 이용하여 이벤트 사용하기

HTML과 자바스크립트에서 이벤트를 등록할 수 있습니다.

1. HTML에서 이벤트 등록

<button onclick="alert('Hello')">btn1</button>

 

HTML 태그에 onclick을 입력하여 클릭 이벤트를 등록하는 방법이 있습니다.

2. JavaScript onclick 속성 추가하기

자바스크립트에서 onclick속성을 부여해서 이벤트를 추가하는 방법이 있습니다.

const btn = document.querySelector('#btn2');
btn.onclick = function() { alert('Hi') };

3. addEventListener를 이용하여 이벤트 등록하는 방법

element에서 addEventListener를 이용하여 클릭 이벤트를 등록할 수 있습니다.

const btn = document.getElementById('btn');

btn.addEventListener('click', function() {
  alert('hi');
})

 

위와 같이 세 가지 방법으로 이벤트를 등록할 수 있습니다.

 

onclick을 이용하여 이벤트를 등록하게 되면 모든 브라우저에서 사용 가능합니다.

하지만 이벤트를 여러 개를 등록하지는 못하고 마지막으로 등록한 이벤트만 등록이 가능합니다.

 

addEventListener를 이용하면 이벤트를 여러 개를 등록 할 수 있습니다.