HTML에서 직접 이벤트를 연결하는 방법

HTML에서는 이벤트를 생성하고, onevent(ex. onclick, onfocus 등)에 자바스크립트 메서드를 연결하여

HTML-DOM에서 자바스크립트가 해당 이벤트에 반응하게 한다.

또는 아래와 같이 직접 HTML 속성에 직접 자바스크립트 코드를 작성하는 방법도 있다.

(여러 구문일 경우 세미콜론으로 구분한다.)

<input type="button" value="Press Me" onclick="alert('thanks');">   
 
<form action="processform.action" onsubmit="return validateForm();">
 
<body onload="startApp()">

JavaScript 에서 이벤트를 관리하는 방법

자바스크립트에서는 기본적으로 event-driven programming 모델을 사용한다.

쉽게말해 해당 이벤트가 발생하면 브라우저에서 자바스크립트로 작성한 이벤트 관리 메서드(event handler)를 호출한다.

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

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

또는 자바스크립트 코드 내에서 event handler를 DOM의 속성으로 할당도 가능하다.

이는 HTML 코드 안에 속성값으로 연결하는 방법과 동일하다.

해당 DOM 요소를 불러와서 프로퍼티(element.value = x) 형태로 할당하면 된다.

document.getElementById('button1').onclick = function(){alert('thanks');};
 
function startApp(){...} 
document.onload = startApp;

그럼 이 둘의 차이는 무엇일까?

ㅇvar btn = document.getElementById('btn');

btn.onclick = function() {
  alert('onclick-1'); // 뒤에 onclick-2에 덮어씌워져서 실행되지않음.
}

btn.onclick = function() {
  alert('onclick-2'); // 실행
}

btn.addEventListener('click', function() {
  alert('addEventListener-1'); // 실행
});

btn.addEventListener('click', function() {
  alert('addEventListener-2'); // 실행
});

해당 코드를 실행시키면, 이벤트 핸들러 (addEventListener)로 연결한 경우 모든 이벤트가 객체로 관리되고 여러개를 등록 할 수 있지만, HTML 속성을 등록(.onclick)하는 경우 1가지 속성(이벤트)밖에 가지지 못하기에 덮어씌워지게된다.

그렇다! 그냥 addEventListener로 등록하는것이 맞다. .onclick 쓰지마라.

그럼 onclick은 왜 만들었는데요?

웹은 애초에 1991년 유럽입자물리학연구소(CERN)에서 팀버너스리가 도서관처럼 자료를 쉽게 공유하기 위해 만들어졌다. 그래서 초창기에는 그냥 텍스트만 박아논 HTML 밖에 없었다.

이후 HTML 코드가 관리하기 어렵고, 개판되니까 스타일을 따로 분리해서 (CSS) 저장하기 시작했고

웹 상에서 여러 서비스, 동작을 만들기위해 간단한 스크립트(Livescript -> JavaScript)가 발전하였고

각각의 브라우저 회사끼리 지 꼴리는 문법의 스크립트 언어(이 당시에는 개발언어라고 보기도 힘든 수준)를 사용하다가

2008년 구글의 Chrome의 등장으로 다른 브라우저들이 경쟁상대가 되지않자 그제서야 스크립트언어의 표준(ECMA)을 만들고, 브라우저들이 그 표준을 따르며 자바스크립트가 지금까지 발전하게 되었다.

즉, 요약하면

onclick 은 웹 초창기부터 (DOM Level-0) 지원하던 기능이고

이후 자바스크립트가 발전하며 addEventListener(DOM Level-2)가 생겼다.

즉 구석기시대 웹(IE8 버전 이하, 2016년도에 이미 지원종료한 서비스) 에서는 onclick 밖에 지원하지 않았다.

이벤트 캡쳐링, 버블링 같은 이벤트 방식을 쉽게 처리할 수 있는게 addEventListener (event-driven) 방식이다.

그냥 .onclick을 쓰지말자.

'🖼Front > HTML&CSS' 카테고리의 다른 글

HTML # 1 자주 쓰는 태그 (0)	2021.03.28
HTML, CSS 기초 (0)	2021.03.22

블로그의 정보

JiwonDev

HTML 이벤트 연결(onclick, addEventListener 차이)