[Javascript] 이벤트

이벤트란?

사용자나 시스템이 어떤 동작을 했을 때 발생하는 신호를 뜻한다.
 

예를 들어, 사용자가 (버튼을 클릭, 키보드 클릭, 마우스 오버, 페이지 로드)
click(클릭), mouseover(마우스를 올림), keydown(키 누름), submit(폼 제출), load(페이지 로딩 완료)

 
<인라인 방식>이란 HTML 태그 안에 직접 자바스크립트 코드를 넣는 방식이다.

장점:간단하고 빠르게 테스트 가능, 구조가 직관적, 외부스크립트 없이 동작 가능

단점:HTML과 JS가 섞여 코드가 지저분해짐, 유지보수에 어려워짐, 하나의 요소에 여러 동작 삽입 난이도 상승
 

이러한 인라인방식의 단점들 때문에 실제 프로젝트에서는 JS와 HTML을 분리시킨 방식인 <이벤트리스너 함수( addEventListener )>를 많이 활용하게 된가.
이러한 방식은 HTML을 건드리지 않고 자바스크립트로 이벤트를 등록할 수 있다.
 
HTML
<button id="myButton"> 눌러보세요 </button>
 
JS
const button = document.getElementById("myButton");

button.addEventListener("click", function () {
  alert("안녕하세요! 이벤트 리스너 방식이에요!");
});
 
getElementById("myButton") -> HTML에 있는 버튼을 JS에서 찾은 것
 
addEventListener("click", function () {
  alert("안녕하세요! 이벤트 리스너 방식이에요!"); ->버튼이 클릭되었을 때 실행할 코드 연결
 
이벤트리스너 장점:HTML이 깔꼼쓰해짐,하나의 요소에 여러 개 이벤트 삽입 가능, JS만 따로 관리 가능, 재사용과 유지보수에 유리함.
 
따라서 초급 연습용으로는 인라인방식이 좋고 현업에서는 이벤트 리스너 방식을 활용한다고 볼 수 있다.