자바스크립트 - 이벤트

이벤트 Event

웹페이지에서 일어나는 일들 : 마우스를 움직이고, 클릭하고, 스크롤, 키보드 입력 하는 등 

 

이벤트 핸들링 Event handling

이벤트가 발생했을 때 어떤 동작을 하도록 이벤트를 다루는 것

 

이벤트 핸들러 Event handler = EventListener

구체적인 동작을 코드로 표현한 함수

 

btn.onclick = function() { // 이벤트 핸들러(Event Handler)
console.log('Hello Codeit!')

---

<button id="myBtn" onclick="console.log('Hello world!')">Click!</button>

이런 식으로 html에 작성해줄 수도 있지만 

 

html 파일 전체의 가독성이 저하된다

html코드와 js 코드가 섞이게 되면서 코드의 일관성이 저하되고 추후 코드 유지보수에 어려움이 생긴다.

 

코드의 목적에 따라 분리하도록 하자

웹페이지 구조 -> html 

동작 -> javascript 

---

볼땐 쉬운데 막상 내가 치려면 뭐가 뭔지 모르겠는 매직

 

id = "grade" 를 갖는 태그를 선택해서 클릭 시 메시지 경고창 띄우기 

 

const btn = document.querySelector('#grade')     < - 문자열로 파라미터를 넣어준다 & 변수에 할당한다

btn.onclick = function(){                <- 해당 변수에 이벤트 발생 시 동작을 함수로 적어준다
  alert('정답입니다!💥');
}