[JavaScript] event

1. event 객체

- event: 무언가 일어났다는 신호, 사건

 -모든 DOM 요소는 이러한 event를 만들어 냄

 

- event object
    - DOM에서 이벤트가 발생했을 때 생성되는 객체

- event 종류
    - mouse, input, keyboard, touch 등
https://jenny-daru.tistory.com/17    

JavaScript - 이벤트(Event), 이벤트의 종류, 이벤트 연결

 

 

 

DOM 요소는 event를 받고 받은 event를 (event handler로) ‘처리’ 할 수 있음

2. event handler

- event handler

- 이벤트가 발생했을 때 실행되는 함수
- 사용자의 행동에 어떻게 반응할지 JS 코드로 표현한 것

addEventListener()
대표적인 이벤트 핸들러로, 특정 이벤트를 DOM요소가 수신할 때마다 콜백 함수를 호출

 

EventTarget.addEventListener(type, handler)

 

→ EventTarget에 특정 Event(type)이 발생하면, handelr 실행

 

addEventListener의 콜백 함수 특징

- 발생한 이벤트를 나타내는 event 객체를 유일한 매개변수로 받음

 

 

- event handler 활용

1) click

-버튼을 클릭하면 숫자를 1씩 증가

2) input

- 사용자의 입력 값을 실시간으로 출력하기

 

3) click&input

- 사용자의 입력 값을 실시간으로 출력

 

3. 버블링

예시)

- form> div> p 형태의 중첩된 구조에 각각 이벤트 핸들러가 있을 때, <p> 요소만 클릭했는데도 불구하고 모든 핸들러가 동작함 

- 버블링이란 이렇듯, 한 요소에 이벤트가 발생하면, 이 요소에 할당한 핸들러가 동작하고 이어서 부모 요소의 핸들러가 동작하는 현상의 의미

- 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복됨

 

 

 버블링이 필요한 이유

- 만약 각자 다른 동작을 수행하는 버튼이 여러 개 있다면 각 버튼마다 서로 다른 이벤트를 할당해야 할까?

→ 각 버튼의 공통 조상인 div 요소에 이벤트 핸들러 단 하나만 할당

→ 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당하면 여러 요소를 한꺼번에 다룰 수 있음

+ 공통 조상에 할당한 핸들러에서 event.target을 이용하면 실제 어떤 버튼에서 이벤트가 발생했는지 알 수 있음

 

 

참고

 

1. lodash

• 모듈성, 성능 및 추가 기능을 제공하는 JavaScript 유틸리티 라이브러리
• array, object 등 자료구조를 다룰 때 사용하는 유용하고 간편한 함수들을 제공
• https://lodash.com/

Lodash

https://despiteallthat.tistory.com/167

 

2. 이벤트 기본 동작 취소하기

.preventDafault()

 

- HTML의 각 요소가 기본적으로 가지고 있는 이벤트가 때로는 방해 되는 경우가 있어 기본 동작을 취소

 

예시)

form 요소의 제출 이벤트를 취소하여 페이지 새로고침 막기