안녕하세요! 오랜만입니다. 3-6월 개인적으로 마무리해야될 일이 있어 업로드에 소홀했는데요..(는 핑계인거 같고 사실 게을렀던거 같아요 흡 반성하겠습니다) 아무것도 없다 오랜만에 업로드라는 이벤트! 가 찾아왔으니 오늘은 브라우저의 이벤트 개념에 대해 소개해보겠습니다. 이벤트(event)란 프로그래밍하고 있는 시스템에서 일어나는 사건 혹은 발생을 의미합니다. 음 이렇게 말하니 애매하죠? (원래 프로그래밍에서 정의들이 좀 원론적이죠) 그럼 이렇게 생각해봅시다. 여러분이 폰에서 웹브라우저를 들어갔을때의 상황을 브라우저의 입장에서 살펴봅시다. 구글 검색창에서 커리어리를 검색해 커리어리 홈페이지로 들어간다음 손가락으로 스크롤을 내렸다고 합시다. 이 때 우리가 무슨 짓을 브라우저에게 저질렀나요? 검색창에 검색어도 입력하고 터치도 했고 스크롤도 했고 그렇네요? 시스템에서 이런 일들이 일어났네요? 시스템에서 키보드 입력, 터치, 스크롤 등의 이벤트가 발생했네요? 그렇습니다. 이벤트란 이런 것이죠! 브라우저에선 사용자 입력이나 DOM과 관련된 일 등 여러 가지 이벤트가 발생할 수 있습니다. 근데 그 이벤트가 발생했을때 아무 일도 안일어나면 예를 들어 검색창에서 검색 버튼을 클릭했는데 아무 일도 일어나지 않는다면 이상하겠죠? 당연히 우리는 검색어를 입력해 검색버튼을 입력하면 검색 결과창으로 이동하거나 검색결과를 바로 노출해는 등 자연스러운 흐름을 기대합니다. 이는 그냥 되는게 아니죠! 이는 프로그래밍을 통해 이벤트 핸들링을 해야 각각의 이벤트에서 특정 행위들이 실행됩니다. JS에서는 HTML의 이벤트를 크게 3가지 방법으로 지원하는데요! 아래 클릭 이벤트에 관한 핸들링 예시와 함께 소개해보겠습니다. 1. 인라인 방식 <button type="button" id="btn" onclick="() => { ... }>검색</button> 2. 프로퍼티 방식 var btn = document.getElementById("btn"); btn.onclick = function() => { ... }; 3. 이벤트 리스너 방식 var btn = document.getElementById("btn"); function btnClickListener(event) { ... }; btn.addEventListener("click", btnClickListener); 어느게 좋다 나쁘다 할건 없고 상황에 맞게 쓰시면 됩니다. 근데 3번째 방식으론 하나의 이벤트에 여러개의 핸들러를 연결할 수 있겠죠? (참고. 여기서 핸들러는 이벤트 핸들링에 인자로 넣는 함수를 의미) 기본적인 이벤트와 이벤트 핸들링에 관한 개념은 이렇습니다. 정말 기본이고 이외에 이제 이벤트에 대해 또 알아야할게 많은데요~ 차차 또 게시물에서 다루어 보겠습니다! (다음 게시물은 아니고 아마 좀 나중일거 같아요..ㅎ)