팝업만들기 중요점 정리

Display와 visibility의 차이점

display:none;은 요소 자체가 사라지게된다. 그래서 요소가 레이아웃에 영향을 미치지 않게 된다.(none이 되면 요소가 사라지고 그 자리를 다른 요소들이 차지함)

하지만 visibility: hidden은 렌더링은 하지않지만 요소가 사라진게 아니라 레이아웃에 영향을 미치게 된다.(hidden이 되어도 그자리는 그대로 차지함)

opacity로 안보이게 조절하는 것과는 다르게 요소가 클릭조차 되지 않게된다.

클래스 생성과 제거 -제이쿼리

• $('선택자').addClass('클래스선택자') - 클래스 생성
• $('선택자').removeClass('클래스선택자') - 클래스 제거

event 버블링 이란?

이벤트가 연속하여 발생하는 버블 현상을 의미한다.

stopPropagation() -자바스크립트

이벤트 버블링을 막기 위해서 사용하는 메서드이다.

클릭과 같은 이벤트들은 이벤트가 걸린 요소의 부모의 요소에게 이벤트가 전달되는 특성이 있는데

그래서 부모요소에 걸어놓은 클릭이벤트가 자식요소를 클릭했을 때도 발생하는 일과 같은 일이 생길 수 있다.

이와 같은 일을 방지하기 위해서 사용한다.

전달되지 않기를 원하는 요소에게 event.stopPropagation()을 실행하면된다.

그러면 그 요소부터는 그 위로 이벤트를 전달하지 않는다.

event

변수 e는 window.event를 가르킨다.

하지만 변수 e가 지원되지 않는 브라우저에서는 작동하지 않는 경우가 있으니 크로스브라우징을 위해서

var e = e || window.event ;라고 사용한다.

||문법의 뜻은 변수 선언에 있어서 해당하는 값이 있는 경우 앞의 값을 선언하고 없는 경우에는 뒤의 값을 선언하게 된다.