[javascript] 이벤트(event)

HTML Event

• 유저가 웹에서 html element에 가하는 각종 액션에 의해 발생되는 것
• event 발생은 html 요소이지만 이에 대한 구체적 로직은 javascript로 구현

HTML Event 예제

• onchange : 요소의 value가 변경되었을때

• onclick : 요소에 커서를 두고 클릭했을때

• onmouseover : 요소로 커서를 이동시켰을때

• onmouseout : 요소에 있던 커서가 요소밖으로 이동했을때

• onload : 브라우저가 해당 element 컨텐츠 로딩을 모두 마쳤을때(img, script, css 등..)

<button onclick="this.innerHTML = Date()">The time is?</button>

그 외 더 많은 이벤트는 링크 참조

addEventListener() method

• javascript로 특정 html element에 이벤트 핸들링 로직을 등록할때 사용
• event 종류는 다양하며 event마다 속성값이 다르다.

코드예제

document.addEventListener("click", myFunction);

function myFunction() {
  document.getelementById("demo").innerHTML = "Hello world";
}

예제1: html element에 직접 이벤트 등록하기

예제2: 자바스크립트의 addEventListener로 html element에 이벤트 등록하는 방법

function onChangeSelectCar() {
  const selectBrand = document.getElementById("selectCar").value;
  const outputArea = document.getElementById("demo");
  outputArea.innerHTML = selectBrand;
  outputArea.style.color = "red";
}

document.addEventListener("DOMContentLoaded", () => {
  const selectBox = document.getElementById("selectCar");
  selectBox.addEventListener("change", onChangeSelectCar);
});

예제3: 여러개 html element에 js의 addEventListener로 이벤트 등록하기