TIL #210111

📚 TIL

---

인터랙티브 자바스크립트

 

🎉 자바스크립트 중급 인터랙티브 자바스크립트 토픽 완료! 토픽2, 3은 출시 예정이래요 🎉

 

🔎 이벤트 살펴보기

 

이벤트 핸들러 등록하기

 

- onclick 프로퍼티로 새로운 이벤트 핸들러를 할당하면

 

(1) 기존의 값을 덮어쓰는 문제가 발생하고

(2) 여러 개의 이벤트를 다룰 수 없음

 

- addEventListener 메소드를 활용하면 위의 문제를 해결할 수 있음

- 이벤트를 삭제할 때 등록할때 사용했던 핸들러를 그대로 전달해야 함

 

elem.addEventListener(event, handler)
elem.removeEventListener(event, handler)

 

이벤트 객체(Event Object)

 

- 웹 페이지에서 이벤트가 발생할 때 관련된 정보를 담은 객체
- 이벤트 핸들러의 첫번째 파라미터에는 자동으로 이벤트 객체가 전달됨

 

이벤트 버블링(Event Bubbling)

 

- 하나의 요소에 이벤트가 발생하게 되면 요소에 할당된 이벤트가 동작하고 같은 타입의 이벤트에 한해서 부모 요소의 핸들러도 동작하는 현상

요소 각각에 할당된 모든 핸들러가 동작하는 원리

- target은 변하지 않고 처음 이벤트가 시작된 시작점을 나타냄

- currentTarget : 이벤트 핸들러가 동작하는 요소 출력하는 프로퍼티

- stopPropagation() : 버블링 전파를 막을 수 있는 메소드

 

캡쳐링(capturing)

 

- 이벤트가 발생하면 가장 먼저, 그리고 버블링의 반대 방향으로 진행되는 이벤트 전파 방식

- addEventListener에 세번째 프로퍼티에 true 또는 {capture:true}를 전달하여 동작

 

표준 DOM 이벤트에서 정의한 이벤트 흐름   1. 캡처링 단계: 이벤트가 하위 요소로 전파되는 단계    2. 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 단계    3. 버블링 단계: 이벤트가 상위 요소로 전파되는 단계

이벤트 위임(Event Delegation)

 

- 버블링을 활용하여 부모 요소에서 한 번에 자식 요소들에 발생한 이벤트를 관리하는 방식

 

브라우저의 기본 동작

 

- 브라우저에는 각 태그별 혹은 상황별로 기본적으로 약속된 동작들이 있음

- 이벤트 객체의 preventDefault 메소드를 통해 막을 수 있음

- HTML 태그들이 가지고 있는 고유한 역할과 의미를 훼손할 수도 있어 꼭 필요한 경우에만 주의해서 사용

 

---

 

🔎 다양한 이벤트 알아보기

 

마우스 버튼 이벤트

 

MouseEvent.button

 

- 0 : 마우스 왼쪽 버튼

- 1 : 마우스 휠

- 2 : 마우스 오른쪽 버튼

- 마우스 이동과 관련된 이벤트에서는 이 값이 null이나 undefined가 아니라 0임 

 

MouseEvent.type

 

이벤트 타입	설명
click	마우스 왼쪽 버튼을 눌렀을 때
contextmenu	마우스 오른쪽 버튼을 눌렀을 때
dbclick	동일한 위치에서 빠르게 두번 click할 때
mousedown	마우스 버튼을 누른 순간
mouseup	마우스 버튼을 눌렀다 뗀 순간
mousemove	마우스 포인터가 이동할 때
mouseover	마우스 포인터가 요소 밖에서 안으로 이동할 때
mouseout	마우스 포인터가 요소 안에서 밖으로 이동할 때
mouseenter	마우스 포인터가 요소 위로 올라온 순간
mouseleave	마우스 포인터가 요소에서 벗어나는 순간

 

mouseover/mouseout과 mouseenter/mouseleave의 차이

 

mouseenter/mouseleave 는

- 이벤트가 자식 요소에 영향을 끼치지 않는다. 
- 버블링이 일어나지 않는다. 
- 자식 요소의 영역을 계산하지 않는다.

 

MouseEvent.위치값/타겟

 

프로퍼티	설명
clientX, clientY	마우스 포인터의 브라우저 표시 영역에서의 위치
pageX, pageY	마우스 커서의 문서 영역에서의 위치
offsetX, offsetY	마우스 포인터의 이벤트 발생한 요소에서의 위치
screenX, screenY	마우스 포인터의 모니터 화면 영역에서의 위치
target	이벤트가 발생한 요소
relatedTarget	이벤트가 발생하기 직전(또는 직후)에 마우스가 위치해 있던 요소

 

키보드 이벤트

 

KeyboardEvent.type

 

이벤트 타입	설명
keydown	키보드의 버튼을 누르는 순간
keypress	키보드의 버튼을 누르는 순간 (출력이 가능한 키에서만 동작)
keyup	키보드의 버튼을 눌렀다 떼는 순간

 

KeyboardEvent.key vs KeyboardEvent.code

 

- key : 이벤트가 발생한 버튼의 값사용자가 누른 키가 가지고 있는 값 
- code : 이벤트가 발생한 버튼의 키보드에서의 물리적인 위치

 

 

input 태그 다루기

 

- 입력의 역할을 하는 태그

 

이벤트 타입	설명
focusin	요소에 포커스가 되는 순간
focusout	요소에 포커스가 빠져나가는 순간
focus	요소에 포커스가 되는 순간 (버블링이 일어나지 않음)
blur	요소에 포커스가 빠져나가는 순간 (버블링이 일어나지 않음)
change	입력된 값이 바뀌는 순간
input	값이 입력되는 순간
select	입력 양식의 하나가 선택되는 순간
submit	폼을 전송하는 순간

 

스크롤 이벤트

 

- 보통 window 객체에 이벤트 핸들러를 등록하고 window 객체의 프로퍼티와 함께 자주 활용
- scrollY 프로퍼티를 활용하면

 

(1) 스크롤된 특정한 위치를 기준으로 이벤트 핸들러가 동작하게 하거나

(2) 스크롤 방향(위로/아래로 스크롤 중인지)을 기준으로 이벤트 핸들러가 동작하게 활용 가능

 

---

 

🔎실습 문제 풀이

 

마우스 버튼 이벤트

 

- 마우스 왼쪽 버튼을 누른 순간 flagBlue에 'up'이라는 클래스 속성값 추가

- 마우스 오른쪽 버튼을 누른 순간 flagWhite에 'up'이라는 클래스 속성값 추가

 

function flagUp(e) {
  if (e.button === 0) {
    flagBlue.classList.add('up');
  } else if (e.button === 2) {
    flagWhite.classList.add('up);
  }
}

 

마우스 이동 이벤트

 

- 마우스 커서가 해당 태그 위로 올라가면 data-title 속성의 값이 나타나도록 코드 작성

 

function showTitle(e) {
  if (e.target.dataset.title) {
    const span = document.createElement('span');
    span.classList.add('title');
    span.textContent = e.target.dataset.title;
    e.target.append(span);
  }
}

 

키보드 이벤트

 

- textarea 태그에서 enter 키를 누르면 sendMyText 함수가 호출되는 코드를 추가

 

function sendMyTextByEnter (e) {
  if (e.key === 'Enter' && !e.shiftKey) {
    sendMyText();
    e.preventDefault();
  }
}
input.addEventListener('keypress', sendMyTextByEnter);

 

input 태그 다루기

 

- input 태그에 단어 입력이 완료되면 화면에 있는 단어들이 사라지도록 코드 작성

 

function removeWord() {
  const word = document.querySelector(`[data-word="${input.value}"]`);
  if (word) {
    word.remove();
    checker();
  }
  input.value = '';
}
input.addEventListener('change', removeWord);

 

---

 

😁 오늘 한 일

---

 

📕 코드잇 공부하기

- 오늘은 자바스크립트 중급 첫번째 토픽(이자 현재 마지막 토픽)을 끝냈어요

- 자바스크립트 기초 공부한 지 2주도 안됐는데 벌써 가물가물.. 복습해야겠어요!

- 자바스크립트도 객체로 이루어져서 이벤트와 객체 개념을 확실하게 해야겠어요

- 출시 예정인 강의들도 나중에 들어야지~~

 

 

📝 블로그 정리하기

- 이제 블로그를 시작한 지 2주 정도 지났네요!

- 얼마 안됐지만 처음 썼던 글을 현재 글과 비교해보니 고칠 점이 많더라고요!

- 이제 서식도 정해져서 글이 더 깔끔해진 것 같아요 ㅎㅎ

- 정리 못한 부분도 다시 하고 ㅎㅎ 이제 진짜 거슬려도 안건드려 ㅠㅠ 넘 오래 했다

 

📖 독서하기

- 베르나르 베르베르의 기억 1편을 마저 읽었어요

- 전작과 비슷하게 책 초반부에 엄청난 사건이 일어나요!

- 매일 책을 읽고 싶은데 난 너무 게을러~~ 하루가 더 길었으면 좋겠어요

- 2019년까지는 매주 독서모임을 했는데 그때가 그리워요 ㅠㅠ