2021-06-07 (56일차) event, preventDefault, return false, alert, confirm, input, stopPropagation, 배경클릭시 팝업닫힘

34강~41강

 

 

#문제. 팝업2 구현, 팝업 2개, 함수 1개로, 단계적 구현 (저번시간에 배운 거 복습)

  1단계 : 정답에서 HTML 복사(제이쿼리 불러오기)
  2단계 : 정답에서 CSS 복사
  3단계 : console.clear();
  4단계 : Popup__init 함수 만들고 실행
  5단계 : .btn-popup-1 클릭 이벤트
  6단계 : .btn-popup-1 클릭시 팝업1 뜸
  7단계 : .popup-1 .popup__btn-close 의 닫기 버튼 클릭시 팝업1 닫기
  8단계 : 팝업 열기 no 변수 적용
  9단계 : 팝업 닫기 no 변수 적용
  10단계 : no를 매개변수 화
  11단계 : popup-3 구현

---

- event

  : 자바스크립트에서 마우스 클릭, 마우스 이동, 키보드 입력 모두 사건으로 본다.

 

- preventDefault( );

  : 하지 말라는 뜻

  ex) <a onclick="event.preventDefault( );" ~></a>

  결과 : 링크 클릭 안 됨

 

- return false

  : preventDefault의 쉬운 방법

  ex) <a onclick="return false;" ~> </a>

  결과 : 링크 클릭 안 됨

 

- alert( );

  : 경고창

 

- confirm( );

  : 질문창 (확인과 취소를 선택하는 창이 나옴)

  ㄴ 확인을 선택하면 true, 취소를 선택면 false

 

- <input type="button" value="버튼">

  : 버튼을 만드는 또 다른 태그

 

확인을 누르면 링크로 이동, 취소를 누르면 아무 변화 없음

ㄴ 원리 : (질문창에 '취소' 선택) false로 인식됨 → (false==false) true로 인식됨 → { return false; } 실행됨

 

---

 

- stopPropagation

  : 전파 멈춰!

  : 태그들은 부모태그에 보고하는 성질을 가지고 있는데 이것을 멈추는 역할을 한다.

 

 

- 팝업이 어두운 배경 아무곳이나 클릭해도 닫히게 하는 방법

합쳐 쓸 수 있는 부분 합쳐주기

ㄴ 문제점 : 팝업을 클릭해도 닫혀버림

ㄴ 해결방안 : .popup__content(팝업창)에다가 return false;를 줘서 전파 멈추기

↓           ↓            ↓            ↓           ↓           ↓            ↓           ↓

ㄴ 문제점 : 팝업의 내용이 늘어나면 화면을 다 뒤덮어서 닫을 수 없는 상태가 됨

ㄴ 해결방안 : 최대 높이를 정해주고,  스크롤바를 만들어주기

    ↓           ↓            ↓            ↓           ↓           ↓

 

ㄴ 문제점 : 닫기 버튼이 애매하게 잘려서 보임

ㄴ 해결방안 : 최대 높이에서 팝업의 헤드 높이를 빼주기

      ↓          ↓          ↓          ↓         ↓          ↓