HTML 이벤트 처리하는 3가지 방식

HTML 태그에 달리는 이벤트를 처리하는 3가지 방법에 대해서 설명드립니다.

아래의 예제는 HTML button의 onclick 이벤트를 예제로 설명드립니다.

HTML DOM element addEventListener함수 이용

가장 권장되는 방식입니다.

기존 이벤트를 유지하고, 이벤트를 추가하는 방식으로 진행됩니다.

실행이 될 때 기존에 추가된 이벤트들이 실행되고, 여기서 추가된 이벤트가 실행 됩니다.

이벤트 선언하는 방식은 이벤트를 연결해줄 DOM객체를 얻어온 후 addEventListener함수를 이용해서 해당 이벤트명과 함수를 연결해 줍니다.

※ 이벤트명은 보통 "on"을 뺀 이름입니다. 'onclick' -> 'click'

<button type="button" id="myName">내 이름</button>

document.getElementById('myName').addEventListener('click', function () {
  console.log('ccusean')
})

HTML DOM element 속성 이용

기존에 추가된 이벤트를 모두 무시하고, 여기서 추가된 이벤트만 실행됩니다.

이벤트 선언하는 방식은 이벤트를 연결해줄 DOM객체를 얻어온 후 이벤트 속성(onclick)에 함수를 연결해 줍니다.

<button type="button" id="myName">내 이름</button>

document.getElementById('myName').onclick = function () {
  console.log('ccusean')
}

HTML 속성 이용

html 태그의 이벤트 속성(onclick)에 자바스크립트 함수를 넣어 줍니다.

<button type="button" onclick="showName()">내 이름</button>

function showName() {
  console.log('ccusean')
}