TIL _ 브라우저에서의 이벤트

11775 단어 JavaScriptJavaScript

1. 이벤트란?

2. 폼(form) 이벤트

3. 마우스(mouse) 이벤트

4. 문서 로딩 이벤트



1. 이벤트란?

🔑 브라우저에서의 이벤트란

  • 클릭을 하거나
  • 양식을 입력하고 제출하거나
  • 마우스의 커서를 올리고 내리는 등

특정 동작이 발생했을 때를 의미합니다.


🔑 이벤트 관련 용어

  • 이벤트 타겟(target): 이벤트가 일어날 객체를 의미합니다.
  • 이벤트 타입(type): 이벤트의 종류를 의미합니다.
  • 이벤트 핸들러(handler): 이벤트가 발생했을 때 실행될 코드를 의미합니다.
<input type="checkbox" onmouseover="alert('선택할 수 없습니다.')">

<!--
이벤트 타겟: checkbox
이벤트 타입: onmouseover(마우스 커서를 타겟 위에 올렸을 때)
이벤트 핸들러: alert('선택할 수 없습니다.')
-->

아래에서 대표적인 브라우저 이벤트 타입들에 대해서 살펴보겠습니다.



2. 폼(form) 이벤트

🔑 submit : 폼의 정보를 서버로 전송(submit)할 때 발생하는 이벤트 타입입니다.

<body>
  <form id="target" action="submit_result.html">
    <label for="book">희망도서</label>
    <input id="book" type="name">
    <input type="submit">
  </form>
  <script>
  let t = document.getElementById('target');
  t.addEventListener('submit', function(event){
    if(document.getElementById('book').value.length === 0){
      alert('희망도서를 입력하세요.');
      event.preventDefault(); // 폼의 action이 실행되는 것을 방지
    }
  });
  </script>
</body>

  • 폼에 희망도서를 기입하여 제출(submit) 버튼을 눌렀을 때,
    - 입력된 데이터가 "submit_result.html"로 전송됨

  • 폼에 아무것도 기입하지 않고 제출 버튼을 눌렀을 때,
    - "희망도서를 입력하세요." 라는 경고창이 뜨면서, 폼의 action이 실행되지 않음


🔑 이외에도 폼 이벤트로는 reset, change, blur, focus 등이 있습니다.

🔑 폼 관련 이벤트는 사용자가 입력한 데이터의 유효성을 파악하는데 주로 활용됩니다.



3. 마우스(mouse) 이벤트

🔑 click(dblclick): 마우스 왼쪽 버튼을 눌렀을 때(더블클릭 했을 때) 발생하는 이벤트 타입입니다.

🔑 contextmenu: 마우스 오른쪽 버튼을 눌렀을 때 발생하는 이벤트 타입입니다.

<body>
  <input type="button" id="hider" value="on/off" />

  <div id="text">감추기 버튼을 좌클릭하면 문장이 사라지고, 우클릭하면 다시 나타납니다.</div>

  <script>
    let h = document.getElementById('hider');
    h.addEventListener('click', function(event) {
      document.getElementById('text').hidden = true;
    });
    h.addEventListener('contextmenu', function(event) {
      document.getElementById('text').hidden = false;
      event.preventDefault();
    });
  </script>

🔑 이외에도 마우스 이벤트로는 mousedown/up, mouseover/mouseout, mousemove, wheel 등이 있습니다.



4. 문서 로딩 이벤트

🔑 load: 웹페이지의 모든 요소에 대한 처리가 끝났을 때 발생하는 이벤트 타입입니다.

<script>
  window.addEventListener('load', function(event) {
    alert("페이지 로딩이 완료되었습니다.")
  });
</script>
  • 웹페이지에 출력될 스타일, 이미지 등의 리소스들이 모두 로드되었을 때 이벤트 핸들러가 실행됩니다.

🔑 이외에도 DOMContentLoaded, beforeunload/unload, error 등이 있습니다.




"작성 내용 중 오류나 오타가 있다면, 댓글로 알려주시면 감사하겠습니다. 주니어 개발자에게 남겨주시는 작은 피드백이 큰 도움이 될 것 같습니다. 고맙습니다 :)"

전단 및 알고리즘 - 동적 계획 의 01 가방 문제 에 대한 분석 및 구현
K - 평균치 집합 알고리즘 을 이용 하여 표시 되 지 않 은 데이터 그룹 을 나 눕 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage