JS BASIC | 이벤트, 이벤트 핸들러, 이벤트 제어

❓ Event란?

시스템에서 일어나는 사건으로, 사용자가 태그와 상호작용 할 때 이벤트가 발생한다.

이벤트의 종류를 알아보는 법

1. https://developer.mozilla.org/en-US/docs/Web/Events 에서 찾기
2. console.dir(objectname)을 통해 찾기

💻 자주 쓰이는 이벤트

UI Event

이벤트	설명
load	로드 완료 이후
unload	창이 닫히거나, 새로운 페이지를 요청하여 언로드된 경우
error	에러가 발생
resize	브라우저 창의 크기 조절
scroll	스크롤
select	텍스트를 선택

Mouse Event

이벤트	설명
click, dbclick	클릭 / 더블클릭
mousedown, mouseup	마우스를 눌렀을 때, 뗐을 때
mousemove	마우스를 움직일 때 (터치스크린 x)
mouseover	요소 위로 마우스를 올렸을 때 (터치스크린 x)
mouseout	요소 공간 밖으로 이동했을 때 (터치스크린 x)
mouseenter	요소 위로 마우스를 올렸을 때
mouseleave	요소 공간 밖으로 이동했을 때

mouseover, mouseout / mouseenter, mouseleave

두 이벤트는 유사하지만 이벤트 전파와 취소 가능성에서 차이가 있다.

• mouseover, mouseout 버블링(상위로 전파), preventDefault 가능
• mouseenter, mouseleave 버블링 x, 기본 동작 취소 x

Keyboard Event

이벤트	설명
keydown	키를 누르고 있을 때
keyup	누르고 있던 키를 뗄 때
keypress	키를 누르고 뗐을 때
keyCode	https://blog.lael.be/post/75

Focus Event

이벤트	설명
focus, focusin	요소가 포커스를 얻었을 때
blur, foucusout	요소가 포커스를 잃었을 때

Form Event

이벤트	설명
input	input 또는 textarea, contenteditable 속성을 가진 요소 값이 변경되었을 때
change	select box, checkbox, radio button의 상태가 변경되었을 때, 폼이 변경되었을 때
submit	form을 submit할 때 (버튼 또는 키)

Clipboard Event

이벤트	설명
cut	콘텐츠를 잘라내기할 때
copy	콘텐츠를 복사할 때
paste	콘텐츠를 붙여넣기할 때

💻 Event Handler (Event Listener)

JS는 이벤트를 자동으로 감지할 수가 없기 때문에 이벤트 핸들러를 직접 추가해 감지하도록 만든다. 이벤트 핸들러는 가끔 이벤트 리스너라고도 불린다.

이벤트핸들러의 표기법은 on + 이벤트명으로 표기하며, 모두 소문자여야 한다.
ex) onclick onmouseleave ...

이벤트 핸들러 등록

1. inline

<button onevent="aleart();"></button> /*html 문서에 입력*/

<button onevent="hander();"></button> /*script 함수에 지정*/
<script>
    function hander() {
      alert('myHandler1');
    }
</script>

2. property

• 오직 하나의 이벤트 핸들러를 바인딩할 수 있기 때문에 여러 차례 바인딩할 경우 마지막 경우만 실행된다.

const btn = document.querySelector('.btn');
btn.onclick = function() { alert(' '); };

3. 변수에 함수 붙이기

• 이 방식은 removeEventListener을 사용할 수 없어 비교적 덜 쓰이는 편이다.

const $a = document.getElementById('#a');

function handler(){};
$a.addEventListener('mouseenter', handler);

//위의 식은 아래와 같이 표현될 수 있다
function handler(){};
$a.onmouseenter = handler;

4. addEventListener (추천!)

• DOM 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백 함수(이벤트 핸들러)를 지정한다.

target.addEventListener('eventType', function{, capture});

콜백 함수 (callback function)

onClickButton 같은 함수를 콜백 함수라고 한다.
콜백 함수는 특정 작업이 실행되고 난 뒤에 추가로 실행되는 함수를 의미한다. 버튼을 클릭한 후에 onClickButton이 추가적으로 실행되므로 콜백 함수라고 볼 수 있다.

const onClickButton = () => {
  console.log('버튼 클릭');
};
const $button = document.querySelector('button');
$button.addEventListener('click', onClickButton);

---

• 핸들러 함수를 호출할 때, 뒤에 괄호를 붙이면 안된다.
  ()를 붙이면 클릭과 상관없이 함수가 실행된다. 함수 자체를 넣어야 하고, ()를 붙여 함수를 실행해서는 안 된다는 점에 주의할 것.
  -> 상수에 함수 자체를 대입했기 때문에 추가로 괄호를 붙이면 안된다는 뜻

const btn = document.querySelector('button');
btn.addEventListener('click', () => { console.log('버튼 클릭');});

---

이벤트 객체

해당 이벤트의 다양한 정보를 저장한 프로퍼티와 이벤트의 흐름을 제어하는 메서드가 담긴 객체이다.

btn. addEventListener("mouseover", function(e){ e.currentTarget.style.color = "red";});

위의 코드의 이벤트 리스너는 인수 e를 받고 있다. 함수의 인수이기 때문에 인수 명은 자유롭지만 관례적으로 e 또는 event라고 명시한다.

아래는 input 태그에 이벤트를 발생시키는 코드이다.

const onInput = (event) => {
  console.log('글자 입력', event.target.value);
};
const $input = document.querySelector('input');
$input.addEventListener('input', onInput);

이 때 매개변수로 event가 존재하는데, 여기서 event.target.value로 input 태그에 입력한 값을 알아낼 수 있다.

💻 이벤트 제어

과도한 이벤트가 발생하게 되면 성능이 저하되므로, 사용자의 이용이 방해받게 된다. 따라서 두 가지의 방법으로 이벤트의 과도한 발생을 막을 수 있다.

debounce

• 연속하여 발생한 이벤트를 그룹화
• 마지막 또는 처음의 이벤트만 호출

사용 사례

• 사용자가 창 크기 조정 마친 후에 resizing event 사용하기 위해
• 키보드 입력을 중지할 때까지 ajax 이벤트를 발생시키지 않기 위해 (api 비용 문제)

Throttle

• 연속하여 발생한 이벤트를 그룹화
• 일정한 주기마다 이벤트가 발생하도록 하는 기술

사용 사례

• 페이지 스크롤 위치를 측정하고 최대 50ms마다 응답하기를 바랄 경우, 무한 스크롤링 페이지