JavaScript Events

자바스크립트 이벤트는 웹 페이지에서 발생하는 동작이나 사건에 대한 응답으로 작동하는 동적인 프로그래밍 기능이다. (Allow scripts to respond to user interactions and modify a page accordingly -> make Web application more dynamic and interactive)

 

이벤트는 사용자의 상호작용(마우스 클릭, 키보드 입력 등)이나 웹 페이지의 상태 변화(로드 완료, 요소 추가 등)와 관련될 수 있습니다.

 

자바스크립트를 활용하여 이벤트를 처리하는 과정은 보통 다음과 같습니다.

1. 이벤트 대상 선정: 이벤트가 발생할 HTML 요소를 선택한다. 대상은 일반적으로 DOM을 통해 선택되며, getElementById, getElementsByClassName, getElementsByTagName 등의 메서드를 사용할 수 있다.
2. 이벤트 핸들러 함수 정의: 이벤트가 발생했을 때 실행될 함수를 정의합니다. 이벤트 핸들러 함수는 원하는 동작을 수행하는 자바스크립트 코드를 포함
3. 이벤트 리스너 등록: 이벤트 대상에 이벤트 리스너를 등록하여 특정 이벤트가 발생했을 때 핸들러 함수가 실행되도록 설정합니다. 주로 addEventListener 메서드를 사용하여 등록

// 이벤트 대상 선택
const button = document.getElementById("myButton");

// 이벤트 핸들러 함수 정의
function handleClick() {
  // 원하는 동작 수행
  console.log("버튼이 클릭되었습니다!");
}

// 이벤트 리스너 등록
button.addEventListener("click", handleClick);

getElementById를 사용하여 "myButton"이라는 id를 가진 요소를 선택하고, handleClick이라는 핸들러 함수를 정의한 후, addEventListener를 사용하여 "click" 이벤트에 대한 리스너를 등록합니다. 이제 버튼이 클릭되었을 때 핸들러 함수가 실행되고 "버튼이 클릭되었습니다!"라는 메시지가 콘솔에 출력됩니다.

DOMContentLoaded 이벤트

문서객체(JS입장에서 HTML tag)를 조작할 때는 DOMContentLoaded 이벤트를 사용한다. 이 이벤트는 웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트입니다. 

 

document.addEventListener('DOMContentLoaded', () => {}) 라는 형태는 "document"라는 문서 객체의 DOMContentLoaded 이벤트가 발생했을 때, 매개변수로 지정한 콜백 함수를 실행해라" 라는 의미.

 

모든 문서 객체는 생성되거나 클릭되거나 마우스를 위에 올리거나 하는 이벤트 라는 것이 발생한다. 그리고 이 이벤트가 발생할 때 실행할 함수는 addEventListener() 메소드를 사용한다. 그리고 이벤트가 발생할 때 실행할 함수를 이벤트 리스너 또는 이벤트 핸들러라고 한다. (An event handler is a function that reponds to an event)

// 여기서 콜백 함수를 이벤트 리스너 또는 이벤트 핸들러라 한다.
문서 객체.addEventListener(이벤트 이름, 콜백 함수)

<script>
//페이지의 DOM 구조가 완전히 로드되었을 때
document.addEventListener("DOMContentLoaded", () => {

  // 이벤트 대상 선택
  const button = document.getElementById("myButton");

  // 이벤트 핸들러 함수 정의
  function handleClick() {
    // 원하는 동작 수행
    console.log("버튼이 클릭되었습니다!");
  }

  // 이벤트 리스너 등록
  button.addEventListener("click", handleClick);
});

</script>

Keyboard events

onkeypress vs onkeydown

• onkeypress is not fired all keys
• onkeydown works for all keys -> To detect only whether the user has pressed a key, use the onkeydown event.