사용자 이벤트(event)의 종류와 감지

김zunyange·2023년 2월 3일

1. Event (이벤트)

일반적으로 프로그래밍 언어에서 이벤트(event)라고 하면 사용자의 동작(마우스나 키보드를 누르는 등의 동작) 혹은 프로그램에서 발생하는 특정한 상황을 의미합니다. 이벤트가 발생하면 보통 사전에 정의된 특정 코드가 실행되고 그에 따라 기능이 동작하거나 화면이 변경되는 등의 변화가 발생합니다.

웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미

자바스크립트는 이벤트에 반응하여 특정 동작을 수행할 수 있음

입력양식으로부터 사용자의 입력값을 가져올 수 있음

HTML 이벤트 속성은 자바스크립트 구문을 직접 실행하거나 함수를 호출할 수 있음

1-1. 이벤트(User Interaction)와 함수

웹 페이지에는 사용자와의 상호작용(User Interaction)이 다양하게 존재합니다.
상호작용은 크게 이벤트(Event)와 동작으로 구분할 수 있습니다. 동작은 로직이나 함수(Function)로 구현하게 됩니다.
- 이벤트 마우스를 드래그합니다. → 함수 박스가 움직입니다.
- 이벤트 박스를 클릭합니다. → 함수 박스가 열립니다. → 함수 1초 후에 오리가 나옵니다.
이벤트(Event)
- 이벤트는 사용자에 의해 발생합니다.
- 이벤트란, 특정 요소와 사용자 사이의 상호작용(Interaction)을 의미합니다.
- ex. 마우스 클릭, 마우스 드래그, 스크롤 이벤트, 키보드 이벤트
함수(Function)
- 함수는 사용자가 발생시킨 이벤트의 결과입니다.
- 이벤트 발생시 동작하는 일(기능)을 미리 정의하는 코드의 모음을 의미합니다.
- ex. 클릭시 화면 전환(화면이 바뀌는 코드 모음), 사진 확대(사진이 확대되는 코드 모음)
사용자가 발생시키는 이벤트와 미리 정의되어 있는 함수를 통해 웹은 사용자와 동적으로 상호작용합니다.
자바스크립트(JavaScript)는 웹과 사용자 간의 동적인 상호작용을 위해 만들어진 언어입니다.
자바스크립트에서 사용자에 의해 발생하는 이벤트(Event)를 감지하고 그에 맞는 결과를 내어줄 수 있도록 프로그램을 작성해야합니다.

1-2. 다양한 웹 이벤트 종류

click
dblclick
mounsedown
mouseenter
mouseleave
mousemove
mouseover
...

HTML DOM Event Object 더 보기

2. addEventListener

2-1. addEventListener

addEventListener 함수는 HTML 요소에 이벤트를 적용할 때 사용하는 함수입니다.
eventListener = event + listener (‘이벤트를 듣고 있다’)
특정 HTML 요소에서 이벤트가 언제 발생하는지 가만히 듣고 있다가, 이벤트가 발생하면 인자(argument)로 받은 함수를 실행시켜줍니다.
addEventListener 함수
```
요소.addEventListener(이벤트종류, function() {
  //이벤트가 일어났을 때 실행될 함수
});
```
- 이벤트를 적용할 HTML 요소를 지정합니다.
- 해당 요소의 addEventListener 함수를 실행시키고(=호출하고) 인자로 이벤트 종류와, 이벤트가 발생했을 때 실행할 함수를 전달합니다.
- addEventListener 함수에는 두 개의 인자(argument)를 전달합니다.
  - 첫 번째 인자 - 이벤트 종류
  - 두 번째 인자 - 이벤트 발생 시 실행할 함수
  - cf. 콜백함수(Callback Function) : 인자로 전달된 함수

2-2. 예시) click 이벤트

버튼, 사진, 글 등 웹사이트에서 이루어지는 이벤트 중 가장 많은 것이 클릭 이벤트 입니다.
- 로그인 버튼 클릭 → 로그인 API 호출
- 상품 사진 클릭 → 상품 상세 화면으로 이동
- 자세히 보기 버튼 클릭 → 팝업 화면 출력

2-2-1. click 이벤트 - 실습 1

완성된 jsfiddle 링크 - 여러분은 jsfiddle에서 직접 해보세요!

    <h1>addEventListener</h1>
    <button id="checkDateBtn">날짜 확인</button>
    <p id="showDate"></p>

    // 요소 획득
    
    // id가 checkDateBtn인 요소를 가져온다 ("날짜확인"이라는 버튼)
    const checkDateBtn = document.getElementById('checkDateBtn'); 
    
    // id가 showDate 요소를 가져온다 (날짜 텍스트를 보여줄 p태그)
    const showDate = document.getElementById('showDate'); 
    
    // checkDateBtn 클릭 이벤트 감지(listen)
    checkDateBtn.addEventListener('click', function() {
      showDate.innerText = new Date(); // showDate 요소의 내용 >>> 현재 날짜 출력
    });

날짜를 보여줄 p태그인 showDate에서, innerText를 사용하셔도 되고, innerHTML을 사용해도 됩니다!
‘click’대신 ‘dbclick’이나 ‘mouseenter’등의 event로 바꿔보세요!

2-2-1. click 이벤트 - 실습 2

event 함수를 추가하고 싶으면, 앞에서 배웠던 DOM에 접근해야 합니다. 그래서 DOM에 어떻게 접근하고, 어떻게 수정하는지 잘 알고 있어야 합니다.

const loginBtn = document.getElementsByClassName('login-btn')[0];

loginBtn.addEventListener('click', function() {
  const password = document.getElementById('password').value;
  const rePassword = document.getElementById('re-password').value;

  if (!password) {
    alert('비밀번호를 입력해주세요!');
    return;
  }
  
  if (!rePassword) {
    alert('비밀번호 확인을 입력해주세요!');
    return;
  }
  
  if (password !== rePassword) {
    alert('비밀번호가 맞지 않습니다!');
    return;
  }
  
  alert('회원가입 성공!!');
});

한 줄씩 확인해보겠습니다.

const loginBtn = document.getElementsByClassName('login-btn')[0];

getElementsByClassName 함수로 login-btn라는 클래스 이름이 있는 요소를 찾습니다.
뒤에 [0]은 왜 붙었을까요?
class 이름은 여러 요소에 중복해서 이름을 줄 수 있습니다. 그래서 getElementsByClassName 으로 요소를 찾으면 여러 요소가 담긴 배열이 반환됩니다.
해당 클래스 이름을 가진 요소가 하나 밖에 없으면, 요소가 하나인(배열 길이가 한 개인) 배열이 반환됩니다. 그렇기 때문에 첫 번째 인덱스에 접근하기 위해 뒤에 [0]을 붙여 해당 요소에 접근했습니다.

그 요소에 addEventListener를 달아줍니다. 첫 번째 인자에 'click'이라고 세팅했습니다.

loginBtn.addEventListener('click', function() {
  // click했을 때 실행될 기능
});

앞으로 loginBtn(.login-btn)을 클릭(click 이벤트가 발생)하면,두 번째 인자로 넘긴 함수가 실행됩니다.

3. 키 이벤트

키 이벤트란, 키보드를 누르면 발생하는 이벤트입니다.

키보드를 눌렀을 때 발생하는 keydown
키보드를 눌러 어떤 텍스트가 작성되는 순간 발생하는 keypress
키보드를 누르고 떼는 순간 발생하는 keyup

이 중 keydown 이벤트로 addEventListener를 추가해봅시다.

const pw = document.getElementById('password');
const code = document.getElementById('code');

pw.addEventListener('keydown', function(event) {
  code.innerHTML = event.code; 
});

아까 getElementsByClassName 으로 요소를 찾으면 배열이 return 되어서 [0] 으로 접근해야 했는데, 이번에는 getElementById로 바로 해당 요소를 사용할 수 있습니다.
왜냐하면, 문서 전체에서 id는 유일하게 사용되기 때문입니다.

const pw = document.getElementById('password');

input#password 요소에 keydown이라는 이벤트를 감지하는 eventListener를 추가하였습니다.

pw.addEventListener('keydown', function(e) {
  code.innerHTML = e.code;
});

input에서 키보드를 입력하면 두 번째 인자인 function이 실행됩니다. 그래서 키보드를 누르면 span#code의 내용에 e.code 가 들어가게 됩니다. 여기서 code 는 입력된 키의 이름 정보를 의미합니다.

enter키의 code는 'Enter' 입니다. 따라서 enter키를 입력했을 때 로그인을 하기 위한 로직은 아래와 같이 작성할 있습니다.

pw.addEventListener('keydown', function(e) {
  if (e.code === 'Enter') {
     //로그인 함수로 이동
  }
});

2-2 에서 클릭 이벤트를 했을 때는 두 번째 인자로 받는 함수에 e 라는 인자가 없었는데, 이번에는 추가했습니다. 이와 같이 두 번째 인자로 들어오는 함수에서 항상 event와 관련된 정보를 인자로 받을 수 있습니다.

console.log(e)
콘솔로 어떤 정보가 들어오는지 확인해 보세요!

출처 : wecode

김zunyange

배움은 즐거워 ~(*ૂ❛ᴗ❛*ૂ)

이전 포스트

DOM이 무엇이고 왜 필요한가?

다음 포스트