05. JS 이벤트

🔅 이벤트

브라우저에서의 동작, 행위
-> click, keydown, keypress, keyup, mouseover, mouseout, mouseleave, mouseenter, change, submit ...

🌟 이벤트 리스너(Event Listener)

이벤트가 발생하는 것을 대기하고 있다가 이벤트 발생이 감지되면 연결된 기능(함수)를 수행함
-> onclick, onkeyup, onchange, onsubmit, ... (on이벤트)

🌟 이벤트 핸들러(Event Handler)

이벤트 리스너에 연결된 기능(함수)
이벤트가 발생했을 때 수행하고자 하는 내용을 작성하는 함수

☑️ 인라인 이벤트 모델

요소 내부에 이벤트 리스너, 핸들러를 작성하는 방법
on이벤트명="함수명()"

<button onclick="fnTest1(this)">버튼</button>

☑️ 고전 이벤트 모델

요소가 가지고 있는 이벤트 속성(이벤트 리스너)에 이벤트 핸들러를 직접 연결하는 방법

document.getElementById("btn1").onmouseover = function(){
	document.getElementById("btn1").style.backgroundColor = "red";
}

☑️ 표준 이벤트 모델

• W3C에서 공식적으로 지정한 이벤트 모델
• 요소.addEventListner("이벤트명", 함수);
• 고전 이벤트 모델의 단점 보완 기능 (한 요소에 여러 이벤트 핸들러를 설정할 수 있다)

btn2.addEventListener("click", function () {
  // 이벤트 핸들러 내부에 작성된 this == 이벤트가 발생한 요소
  console.log(this);

  this.style.backgroundColor = "pink";
  this.style.border = "3px solid red";
  this.style.padding = "10px";
  this.style.display = "block";
});