DOM_Event

0l0l·2021년 3월 26일

Event Handler = Event Listener = 이벤트 콜백함수

이벤트는 브라우저 입장에서 사용자가 어떤 행동을 하면 어떤 방식으로 처리해주겠다는 로직을 쌓아가는 것이다.
이벤트가 발생했을 때 실행되는 함수를 적어서 연결해주는 것이 '이벤트 핸들러'!
각각의 이벤트에 따라서 여러가지 핸들러를 만드는 것이 목적이다.

⁕ addEventListener( ) (가장 보편적으로 사용하는 메소드)

좀 더 정교하고 이벤트(전파)를 컨트롤 할 수 있는 기능을 제공해준다.
하나의 이벤트에 여러 핸들러를 붙일 수 있다.
('onclick'은 하나의 핸들러만 가능하며, 옛날 방식으로 비추천.)

이벤트가 발생하면,

'누구에게' ← 이벤트가 누구에게 발생했는지에 대한 대상
'~가 일어나면' ← 이벤트 타입
'~를 하겠다!' ← 이벤트 발생 시 일어나는 로직(함수)

addEventListener는 세 개의 인자를 가진다.
(ex. element.addEventListener('click', function(e) { }, false); )

이벤트 타입 (필수인자!)
이벤트 핸들러 (필수인자!)
이벤트를 어떻게 컨트롤 할 것인지 (옵션)
⇒ 캡쳐 사용 여부: default는 false로 설정
bubble(하위요소→상위요소)이 기본 설정으로 capture(상위요소→하위요소)하려면 true로 설정해야 한다.

반드시 알아야 할 이벤트 종류!

<사용자 인터페이스 이벤트>

load
resize
scroll

focus
blur (어떤 요소를 focus한 상태에서 다른 요소를 focus하면 원래 요소의 focus가 해제되는 찰나의 순간)
⇒ 내가 선택했던 것을 해제시켜줄 때 쓰는 이벤트!

<Form(폼) 이벤트>

change (input, textarea와 같은 요소의 값이 바뀌었을 때 발생)
submit (submit 버튼을 눌렀을 때)
⇒ Form 안에 value, name 등의 속성값 추출할 때 사용

click (마우스로 클릭한 상태. mousedown과 차이 파악!)
mousedown (마우스가 눌려진 상태)
mouseenter
mouseleave (hover 동작과 유사)
mouseup
keydown (키보드를 눌렀을 때)
keyup (키보드를 누르고 떼는 순간)

<Touch 이벤트> (모바일 환경/ MouseEvent와 대체)

touchstart
touchend
touchmove

이벤트가 어떻게 사용되는 것을 아는 것 뿐만 아니라,
이벤트가 '어떤 식으로 동작'하는지에 대해서 반드시 이해!!!

Event Flow(이벤트 흐름)

html은 항상 중첩 되어 있다.(html ⊃ body ⊃ div...)
div를 클릭했으나 body와 html에도 click 이벤트가 있으면, 도미노처럼 모두 실행된다.
이벤트 탑승되어 부모 관계에 있는 관련된 관계자들은 전원 실행!
⁕ 실행 순서: ① div🎉 ▶ ② body🎉▶ ③ html🎉

♪ currentTarget = 이벤트가 실행되는 주체

♪ target = 이벤트가 실행되게 만든 시초, 원인

↪ 위의 속성은 이벤트 객체가 제공하는 대표적인 공통 property!

예를들어, div를 클릭했는데 html에 있는 핸들러가 실행된다면,
이벤트 핸들러의 주인 'currentTarget'은 html이 되고,
이벤트가 실행되게 만든 원인 'target'은 div가 된다.

특정 요소에 이벤트를 실행했는데 다른 요소들도 동일한 이벤트가 있는 경우, '누구 먼저 이벤트를 실행시킬 것이냐'에 대한 문제가 발생하기 때문에 이벤트는 Eventflow를 가진다는 것이다.

♪ propagate (전파하다, 명사로는 위임)

➕ 가장 상위 요소(root)는 html

1) Capture phase (propagate up)

브라우저에서 가장 가까운 요소부터 시작
이벤트가 가장 아래에 있는 상위요소에서 위에 있는 하위요소로 올라가 전파함

2) Target phase

이벤트가 시작된 진짜 주인의 이벤트가 실행

3) Bubble phase (propagate down)

이벤트가 하위요소에서 상위요소로 밑으로 내려와 전파함

위의 세 단계를 그리면 부메랑 형태를 띈다.
Event flow는 '캡-타-버' 순으로 흐르며, 정해진 순서로 바꿀 수 없다!!

부메랑 형태로 이벤트가 실행되면 중복으로 실행되는 문제가 발생되어 브라우저는 제약을 둔다.
즉, currentTarget과 target이 일치하지 않는 경우, Capture phase와 Bubble phase 중 발생될 곳을 선택할 수 있다.
(event flow phase 중 어느 단계에서 실행되고 싶은지를 선택함)

브라우저의 기본값은 bubble로 설정되어 있다. (대부분이 bubble)
div를 클릭했는데 html이 먼저 실행되지 않고, 실행 되길 원하는 div를 클릭해 먼저 실행될 수 있도록 하는 것이 합리적이라고 생각한다.

반드시 알아야 할 이벤트 객체 메서드

e.stopPropagation()

capture일 때 혹은 bubble일 때 실행되지 않고 클릭한 요소만 실행되도록 하고자 할 때 사용하는 메서드이다.
일단 브라우저의 기본 행태이기 때문에 브라우저의 '이벤트가 캡쳐 단계에서 버블 단계로 돌아오는 흐름'은 절대 막을 수 없다.
그러나 전파하는 것은 막을 수 있다! 이벤트를 컨트롤 할 수 있다!
e.stopPropagation()이 선언된 요소 기준 이후에 (원래 실행되기로 한 phase) 전파되는 것을 멈추라는 의미이다.

이벤트를 사용할 때 기억해야 하는 사실!😲

이벤트 핸들러를 달면 브라우저는 무조건 '이벤트 객체'라는 것을 넣어 준다. (무조건 약속!🤝)
이벤트 객체는 보통 'e, evt, event'라는 이름으로 많이 쓰인다.
브라우저가 이벤트 객체를 항상 보내줄테지만 필요 없다면 쓰지 않으면 된다.

이벤트 객체(= 해당 이벤트와 연관된 정보를 모은 것)는 이벤트의 종류에 따라서 달라지는데 이벤트 객체에서 오는 속성과 메서드들이 조금씩 달라진다.
➕ 태그 안에 원하는 정보가 (value가 아니라) text라면 실질적인 정보가 필요하기 때문에 이벤트 객체(e)의 도움을 받을 수 밖에 없다.

★ 이벤트에 공통적으로 들어가는 메서드나 속성!