TIL#30

자바스크립트 이벤트 및 이벤트 처리 방법에 대하여 설명하시오.

이벤트는 웹 애플리케이션에서 발생하는 사용자의 동작이나 브라우저 내부의 다른 요소들과의 상호작용을 의미합니다. 사용자의 클릭, 마우스 이동, 키보드 입력 등은 모두 이벤트로 간주될 수 있습니다.

JavaScript를 사용하여 이벤트를 처리하는 방법은 다음과 같습니다:

• HTML 요소에 직접 이벤트 핸들러를 추가하기: HTML 요소의 속성으로 이벤트 핸들러를 추가할 수 있습니다. 예를 들어, 버튼 요소에 "onclick" 속성을 사용하여 클릭 이벤트를 처리할 수 있습니다.

<button onclick="myFunction()">클릭</button>

• JavaScript에서 이벤트 핸들러를 할당하기: JavaScript 코드 내에서 이벤트 핸들러를 할당할 수도 있습니다. 이 방법을 사용하면 더욱 유연하게 이벤트를 처리할 수 있습니다. 예를 들어, 아이디가 "myButton"인 요소를 선택하고 클릭 이벤트에 대한 핸들러를 할당할 수 있습니다.

const button = document.getElementById("myButton");
button.addEventListener("click", myFunction);

• 이벤트 객체 사용하기: 이벤트 핸들러 함수는 일반적으로 이벤트 객체를 매개변수로 받습니다. 이 객체를 사용하여 이벤트에 대한 자세한 정보를 얻을 수 있습니다. 예를 들어, 클릭한 버튼의 속성을 알고 싶다면 다음과 같이 할 수 있습니다.

function myFunction(event) {
  const targetButton = event.target;
  console.log("클릭한 버튼의 텍스트: " + targetButton.textContent);
}

+/- 버튼을 클릭하면 숫자가 변하는 기능을 구현하시오.

window.onload = () => {
  let number = document.querySelector("h3");
  let increament = document.getElementById("plus");
  let decreament = document.getElementById("minus");

  function increase() {
    number.innerHTML = Number(number.innerText) + 1;
  }
  function decrease() {
    number.innerHTML = Number(number.innerText) - 1;
  }

  increament.addEventListener("click", increase);
  decreament.addEventListener("click", decrease);
};