[Javascript] 이벤트(Event)

정규 표현식
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions
문자열에 특정 문자 조합과 대응시키기 위해 사용되는 패턴

정규표현식.test('비교할 문자열') --> 정규표현식에 부합하면 true / 아니라면 false 리턴

^a      'a'로 시작됨
\d      숫자
a{n}     'a'가 n번 반복
a{n,m}  'a'가 n번 이상, m번 이하 반복
a$       'a'로 종료됨
[a-z]    'a'부터 'z'중 하나
a+       'a'가 한번 이상 반복됨

이벤트(Event)
- 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미
- 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행
- 자바스크립트는 비동기식 이벤트 중식 프로그래밍 모델이라고 함

 

이벤트 타입(Event Type)
- 발생한 이벤트의 종류
- 이벤트명이라고도 함
- 가장 많이 사용되는 키보드, 마우스, HTML DOM, window객체 등을 처리하는 이벤트가 많이 제공 (예 : onclick, onkeyup, onload, ...)

 

이벤트 타겟(Event Target)
이벤트가 일어난 객체

이벤트 리스너(Event Listener)
- 이벤트 핸들러라고도 함
- 이벤트가 발생했을 때 특정 처리, 특정 행위를 담당하는 함수
- 지정된 타입의 이벤트가 특정 요소에서 발생하면 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행(호출)

<input type="button" onclick="sendit()" value="가입완료" id="btn">  <- 이벤트 타겟
                                -----      --------
                             이벤트명  이벤트리스너

const btn = document.getElementById("btn");
btn.addEventListener('click',sendit);
 ---                         ------- ------

이벤트타겟            이벤트명  이벤트리스너

 

이벤트 객체(Event Object)
- 특정 타입의 이벤트와 관련이 있는 객체
- 해당 타입의 이벤트에 대한 상세 정보를 저장
- 모든 이벤트 객체는 이벤트의 타입을 나타내는 type 프로퍼티와 이벤트의 대상을 나타내는 target 프로퍼티를 포함함
- 이벤트 객체는 이벤트 리스너가 호출될 때 매개변수로 전달

 

이벤트 전파
- 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정
- 이벤트의 대상이 window 객체와 같은 단일 객체라면 이벤트의 전파는 일어나지 않음
- document 객체나 HTML 문서의 요소에서 이벤트가 발생하면 대상 요소를 결정하기 위해 이벤트 전파가 일어남

  (전파되면서 리스너들을 호출)
- 이벤트의 전파 방식은 버블링, 캡쳐링 방식으로 나뉨

버블링 : 타겟 -> 부모 방향으로 전파
캡쳐링 : 부모 -> 타겟 방향으로 전파