[JavaScript] 이벤트와 이벤트 핸들러, 이벤트 객체 event(e)

[JavaScript] 이벤트와 이벤트 핸들러, 이벤트 객체 event(e)

📌 이벤트란?

`이벤트`(event)란 웹페이지에서 발생하는 사용자 상호 작용을 말한다.

웹 페이지에서 무언가가 일어났다! 라는 신호이다.

즉, 사용자가 어떤 행동을 취하거나 브라우저에서 자체적으로 발생하는 상황을 말한다.

 

📌 이벤트의 종류

마우스 이벤트

종류	설명
click	마우스 클릭 시 발생
dblclick	마우스 더블클릭 시 발생
mousedown	마우스를 누를 때 발생
mouseup	마우스를 뗐을 때 발생
mousemove	마우스를 움직일 때 발생
mouseover	마우스가 요소 위로 올라갈 때 발생
mouseout	마우스가 요소 바깥으로 나갈 때 발생

 

💡 `모달창 닫기` 기능 구현 시 mousedown 이벤트 사용

모달창과 같이 바깥 영역을 클릭했을 때 닫히게 하고싶다면, `mousedown 이벤트`를 사용하면 된다.

click 이벤트를 사용할 경우 input 요소의 영역을 지정하다 마우스 드래그 상태에서 모달창 영역을 벗어나게 된다면, 모달창을 닫으려는 의도가 없어도 닫히게 되기 때문이다.

 

키보드 이벤트

종류	설명
keydown	키보드를 누를 때 발생
keyup	키보드를 뗐을 때 발생
keypress	키를 누르고 떼는 동작이 모두 일어날 때 발생

 

폼 이벤트

종류	설명
submit	폼을 제출할 때 발생
change	입력 요소의 값이 변경될 때 발생
input	입력 요소에 사용자가 입력할 때 발생

 

포커스 이벤트

종류	설명
focus	요소에 포커스가 설정될 때 발생
blur	요소에서 포커스가 해제될 때 발생

 

윈도우 이벤트

종류	설명
load	문서나 자원들이 로드될 때 발생
resize	브라우저 창의 크기가 변경될 때 발생
scroll	스크롤바가 움직일 때 발생

 

📌 이벤트 핸들러란?

Javascript 에서 이벤트를 다룰 때 `이벤트 핸들러`를 사용한다.

이벤트 핸들러는 "이벤트가 발생했을 때 실행되는 함수"를 말한다.

사용자의 동작으로 인해 어떤 이벤트가 발생했을 때 그로 인해 어떤 일이 발생될 것인지 정의해주는 것이다.

인라인 방식

인라인 방식은 HTML 요소의 속성으로 직접 이벤트 핸들러를 할당하는 방식이다.

<button onclick="myEvent()">클릭</button>

 

💡 인라인 방식, 이벤트 핸들러의 단점

• MDN 에서는 인라인 방식을 사용하지 말라고 명시해놨다.
  HTML 과 Javascript 를 뒤죽박죽 섞어서 쓰면 분석하기 어려워지기 때문이다.
• 하나의 이벤트 핸들러만 등록시킨다.

 

📌 이벤트 리스너란?

JavaScript 코드에서 이벤트를 동적으로 처리하는 방식을 말한다.

addEventListener 메서드를 이용해 이벤트를 대상 요소에 연결하고, 이에 따라 실행될 함수(이벤트 핸들러)를 전달한다.

비 인라인 방식

비 인라인 방식은 HTML 이 아닌 Javscript 코드를 이용해 이벤트 핸들러를 동적으로 할당하는 방식이다.

<button id="button">클릭</button>

var Button = document.getElementById('button');
Button.addEventListener('click', myEvent());

const myEvent = () => {
  alert('클릭!');
}

주로 이벤트 리스너가 Javascript 에서 동적으로 이벤트를 다룰 때 일반적으로 사용한다.

 

💡 비 인라인 방식, 이벤트 리스너의 장점

• 이벤트 리스너를 여러개 등록 가능
• 모든 DOM 노드에 이벤트 리스너 등록 가능
• 이벤트 전파 제어 가능

 

📌 이벤트 리스너 추가 및 제거

이벤트 리스너 추가

addEventListener 메서드에는 두 가지 매개변수가 존재한다.

첫번째 매개변수에 핸들러에 등록하고자 하는 이벤트의 이름과,

두번째 매개변수에 우리가 이벤트 후에 실행되기를 원하는 핸들러 함수를 넣어주면 된다.

button.addEventListener("click",
  () => {
    let RGB_COLOR =
      "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
    document.body.style.backgroundColor = RGB_COLOR;
  }
);

 

이벤트 리스너 제거

button.removeEventListener("click", changeFontSize);

 

📌 이벤트 객체

이벤트 핸들러 함수 내부에서 event, evt, e 와 같은 이름의 매개변수를 본 적 있을 것이다.

이것을 `이벤트 객체`라고 한다.

e.target.value
e.currentTarget
e.preventDefault()
e.stopPropagation()

자주 사용되는 이벤트 객체를 사용한 기능이다.

 

e : 이벤트 객체	설명
e.target.value	주로 `입력 요소`에서 발생하는 이벤트. 이벤트가 발생한 요소 자체를 가리키며, 요소의 현재 `값`을 반환한다. ex. input, textarea, ...
e.currentTarget	이벤트 핸들러가 현재 `실행 중인 요소`를 가리키는 속성. 이벤트 버블링(Bubbling)이나 캡처링(Capturing) 단계에서 어떤 요소에서 이벤트가 발생했는지에 대한 정보를 제공한다.
e.preventDefault()	이벤트의 기본 동작을 취소하는 메서드. 버튼의 새로고침하는 기본 동작을 막을 수 있다.
e.stopPropagation()	이벤트의 전파(`버블링` or `캡처링`)를 중지시키는 메서드. 현재 이벤트가 상위 요소로 전파되지 않도록 막는다.

 

 

---

참고 : MDN 문서, chat gpt