JS 문법 - 이벤트

Class: 제로베이스
Created: December 28, 2022 5:46 AM
Type: Javascript
강의 명: 초심자도 빈틈없이 학습하는 자바스크립트

이벤트

• 시스템에서 일어나는 어떠한 사건
• 예를들어, 저장버튼을 눌렀을 때, 다른 창으로 이동한다던가 “저장되었습니다” 메세지가 뜨는 것 모두를 이벤트가 발생했다고 한다.

자주 사용하는 이벤트 종류

종류 (1)

마우스 이벤트	이벤트 핸들러	설명
click, doubleclick	onclick, ondbclick	마우스 클릭, 더블클릭
mousecown	onmousedown	마우스를 누를 때
mouseup	onmouseup	눌렀던 마우스를 땠을 때
mouseover	onmouseover	요소 위로 마우스를 올렸을 때
mouseout	onmouseout	요소 밖으로 마우스를 움직였을 때

종류(2)

포커스 이벤트	이벤트 핸들러	설명
focus	onfocus	포커스 얻음
blur	onblur	포커스 잃음

종류(3)

기타 이벤트	이벤트 핸들러	설명
submit	onsubmit	폼 전송
resize	onresize	사이즈 조절
select	onselect	텍스트 선택
scroll	onscroll	스크롤 기능
change	onchange	폼 변경

이벤트 핸들러

• 이벤트를 다룬다
• 이벤트 발생시 실행되는 코드
• 이벤트를 js 에서 인식하여 사용하게 한다.
• 이벤트 리스너라고 부르기도 함.

이벤트 핸들러 표기법

on + “이벤트 명” 표기(모두 소문자로 표기)
ex) onclick

이벤트 등록

이벤트 핸들러(리스너)를 통해 함수 등록

이벤트 객체

이벤트 객체란, 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보를 제공하는 것을 말한다. 이벤트가 발생하면, 이벤트 객체는 동적으로 생성되어, 이벤트 핸들러에 인자로 암묵적으로 전달된다.

• 이벤트가 일어나는 것 그 자체
• 이벤트의 기능 및 속성 제공

<button type = 'button' id="btn"> 클릭 </button>

<script>
    let btn = document.getElementById("btn");
    btn.addEventListener("click", btnClickEvent);

    function btnClickEvent(event) {
      console.log(event); // 이벤트가 일어나는 것 그 자체
      console.log(event.target) //
      console.log(event.currentTarget)
    }
</script>

• 위 코드에서 ‘event’가 이벤트 객체인데, 위 코드처럼 이벤트 핸들러를 선언할 때, 이벤트 객체를 전달받을 첫번째 매개변수를 명시적으로 선언해야 한다. 그 이름은 위와 같이 ‘e’가 되든, ‘event’가 되든 상관이 없다.
• 이벤트도 개게이기 때문에, 프로퍼티와 메소드를 가진다.

이벤트 속성

Event.target & Event.currentTarget

• Event.target: 실제로 이벤트를 발생시킨 요소
• Event.currentTarget: 이벤트에 바인딩된 DOM 요소(addEventListener 메소드 앞에 기술된 객체)

버튼 2개를 자식요소로 가지고 있는 parent 요소가 있다고 해보자.

<div class="parent">
  <button id="btn1">button 1</button>
  <button id="btn2">button 2</button>
</div>

<script>
  var parent = document.querySelector('.parent');
  parent.addEventListener('click', getEventTarget);

  function getEventTarget(e) {
    console.log(e.target); // <button id="btn1">button 1</button>

    console.log(e.currentTarget); // <div class="parent">...<div>

    console.log(this); // <div class="parent">...<div>

    console.log(e.currentTarget === this); // true
  }
</script>

만약 첫번째 버튼(button 1)을 클릭하게 되면 결과는 위와 같이 나온다.

1. e.target은 실제로 이벤트를 발생시킨 요소로, 첫번째 버튼(button 1)이 된다.
2. 그러나, e.currentTarget은 이벤트에 바인딩된 DOM 요소(addEventListener 메소드 앞에 기술된 객체)로,
3. 이벤트가 발생된 곳은 첫번째 버튼이지만, 이벤트에 바인딩된 DOM 요소는 parent(부모요소)이기 때문에, e.currentTarget은 parent 요소가 된다.
4. 또한, addEventListener 함수에서 지정한 이벤트 핸들러 내부의 this는 Event Listener에 바인딩된 요소(parent)를 가리킨다.
5. 이것은 이벤트 객체의 currentTarget 프로퍼티와 같다.

Event.type & Event.keyCode

• Event.type: 발생한 이벤트의 종류
• Event.keyCode: 발생한 이벤트의 키보드 번호

<div class="parent">
  <input type="text" class="val">
  <button id="btn">button</button>
</div>

<script>
  var inputBox = document.querySelector('.val');
  inputBox.addEventListener('keyup', getEventType);

  function getEventType(e) {
	  console.log(e.type); // keyup
	  console.log(e.keyCode); // 13
  }

</script>

1. 어떤 알파벳 하나를 입력하고, 키보드에서 ‘enter’를 입력하게 되면
2. e.type은 ‘keyup’이 되고, e.keyCode는 13이 된다.
3. 즉, 발생한 이벤트의 타입은 ‘keyup’이고,
4. 발생한 이벤트의 키보드 번호(enter의 키보드 번호)는 13이다.

Event.preventDefault() && Event.stopPropagation()

• Event.preventDefault(): 이벤트의 기본 동작을 중단
• Event.stopPropagation(): 이벤트의 전파(버블링/캡처링)를 중단