jennet1 님의 블로그

JS [이벤트 발생] 본문

WEB/JS

JS [이벤트 발생]

jennet1 2024. 9. 23. 16:14

- Event Listener : 사용자 상호작용을 처리하는 중요한 요소이다. 클릭,입력,마우스 움직임 등

다양한 이벤트가 발생할 때 특정 작업을 수행할 수 있게 한다.

 

Event Listener 구조는 다음과 같다.

element.addEventListener(event, function, useCapture);
  • element : 이벤트를 동작할 HTML 요소
  • event : 발생할 이벤트 종류 ("click"."keydown")
  • function : 이벤트가 발생했을 때 실행될 함수

자주 사용하는 이벤트 

  • click: 요소가 클릭되었을 때 발생
  • mouseover: 마우스가 요소 위로 올려졌을 때 발생
  • keydown: 키보드에서 키가 눌렸을 때 발생
  • submit: 폼이 제출되었을 때 발생
  • input: 사용자가 입력 필드에 텍스트를 입력할 때 발생

 

클릭 이벤트 발생 예제 : 버튼을 클릭하면 메시지 출력

See the Pen Untitled by 성은총 (@xxlblqtl-the-selector) on CodePen.

 

키보드 이벤트 

- 사용자가 텍스트 입력 필드에 타이핑 할 때마다 keydown 이벤트가 발생하며 콘솔에 입력한 키 값이 출력된다.

<body>
  <input type="text" id="textInput" placeholder="여기에 입력하세요">

  <script>
    const inputField = document.getElementById('textInput');
  
    inputField.addEventListener('keydown', function(event) {
      console.log(`입력한 키: ${event.key}`);
    });
  </script>

 

'WEB > JS' 카테고리의 다른 글

JS [Value 속성]  (0) 2024.09.23
JS [random]  (0) 2024.09.23
JS [children childrenNodes]  (0) 2024.09.22
JS [DOM TEXT]  (0) 2024.09.21
JS [DOM]  (0) 2024.09.21
'WEB/JS' Related Articles more