자바스크립트 이벤트 리스너 종류

자바스크립트에서 이벤트 리스너 종류에 대해 알아보고 이벤트 리스너란 무엇인지에 대해 알아보도록 하겠습니다.

이벤트 리스너 및 사용자 입력 처리는 JavaScript에서 중요한 개념입니다. 사용자 작업에 응답하는 대화형 웹 페이지 및 애플리케이션을 만들 수 있기 때문입니다. 

 

이벤트 리스너란

자바스크립트에서 이벤트 리스너는 버튼 클릭이나 키보드 누름과 같은 HTML 요소에서 발생하는 특정 이벤트를 기다리는 기능입니다. 이벤트가 발생하면 함수가 트리거되고 이벤트에 대한 응답으로 일부 작업을 수행할 수 있습니다.

 

HTML 요소에 이벤트 리스너를 추가하려면 먼저 JavaScript를 사용하여 요소를 선택해야 합니다.

 

이는 getElementById() 또는 querySelector()와 같은 다양한 메서드를 사용하여 수행할 수 있습니다. 요소를 선택한 후에는 addEventListener() 메서드를 사용하여 이벤트 리스너를 요소에 연결할 수 있습니다.

 

다음은 버튼 요소에 이벤트 리스너를 추가하는 예입니다.

const button = document.getElementById('myButton');

button.addEventListener('click', function() {
// code to be executed when the button is clicked
});

이 예제에서는 먼저 id 속성과 getElementById() 메서드를 사용하여 버튼 요소를 선택합니다.

그런 다음 addEventListener() 메서드를 사용하여 버튼에 이벤트 리스너를 연결합니다. 메서드의 첫 번째 인수는 수신하려는 이벤트의 이름(이 경우 click)이고 두 번째 인수는 이벤트가 발생할 때 실행될 함수입니다.

 

 

이벤트 리스너 종류

이벤트 리스너 종류에 대해 간단하게 알아볼텐데요. HTML 요소에 이벤트 리스너를 사용하여 사용자 입력을 처리할 수 있습니다. 버튼 클릭, 양식 제출 및 키보드 입력과 같이 처리하고자 하는 많은 유형의 사용자 입력이 있습니다.

 

아래 예시를 통해 몇 가지 종류에 대해서 알아보도록 하겠습니다.

 

버튼 클릭

가장 일반적인 사용자 입력 유형 중 하나는 버튼 클릭입니다.

 

이벤트 리스너를 사용하여 버튼을 클릭할 때를 감지하고 그에 대한 응답으로 몇 가지 작업을 수행할 수 있습니다. 예를 들어 버튼을 클릭할 때 HTML 요소의 텍스트를 변경하고 싶을 수 있습니다.

<button id="myButton">Click me!</button>
<p id="myText">Hello, world!</p>

 

const button = document.getElementById('myButton');
const text = document.getElementById('myText');

button.addEventListener('click', function() {
text.textContent = 'Button clicked!';
});

이 예제에서는 먼저 id 속성과 getElementById() 메서드를 사용하여 버튼과 텍스트 요소를 선택합니다.

 

그런 다음 addEventListener() 메서드를 사용하여 버튼에 이벤트 리스너를 연결하고 버튼을 클릭하면 실행될 함수를 제공합니다. 이 함수는 myText 요소의 텍스트를 "Button clicked!"로 변경합니다.

 

양식 제출

또 다른 일반적인 유형의 사용자 입력은 양식 제출입니다.

 

사용자가 양식을 제출하면 입력한 데이터를 처리하고 메시지를 표시하거나 새 페이지로 리디렉션할 수 있습니다. 다음은 이벤트 리스너를 사용하여 양식 제출을 처리하는 방법의 예입니다.

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <button type="submit">Submit</button>
</form>

<p id="myMessage"></p>

728x90

const form = document.getElementById('myForm');
const message = document.getElementById('myMessage');

form.addEventListener('submit', function(event) {
event.preventDefault();

const name = document