[Tip] Esc로 팝업창 닫기

 이전에 썼던 스크립트들을 정리하다가 만들어둔 팝업창을  Esc키로 끄는 구문을 다시끔 보게됐는데,

 그때는 스크립트를 넣기만 했었지 따로 소스를 자세히 볼 생각을 못했어서 이번 기회에 구문을 다시

 보면서 다시끔 공부를 하는 기분이 들었습니다.

 Esc로 팝업창을 닫는 스크립트는 아래와 같습니다.

window.onkeyup = function(e) {
	var key = e.keyCode ? e.keyCode : e.which;

	if(key == 27) {
		$(".modal").fadeOut(90);
		$("body").css({overflow:'scroll'}).unbind('touchmove');
	}
}

 (이 아래 내용은 제가 공부 겸 메모로 적어놓은 구문풀이 내용임을 참고부탁드립니다)

 변수 key값이 e.keyCode ? e.keyCode : e.which; 구문 형태를 띄고 있는데,

 해당 구문은  조건부(삼항) 연산자로 e.keyCode가 true면 e.keyCode가 실행, false면 e.which가 실행된다고 합니다. 

조건부(삼항) 연산자는 if..else문의 단축형으로

 if..else문을 사용하면 너무 복잡해지는 식에서 사용된다고 하는데 

매번 보기만 해왔었지 이게 무슨 구문일지를 생각해오지 않았었다는게 다시끔 안습... 

(여기서 event.which는 키보드 키 또는 마우스버튼이 이벤트에 대해 눌러졌는지 반환합니다.)

if문에 쓰인 27의 경우는 keycode table에서 27이 Esc를 의미하기에 쓰인 값이며,

unbind는 이전에 연결된 이벤트 핸들러를 요소에서 제거하는 때에 쓰이는 메서드로 쓰인다고 하네요.

* 팝업 : https://codepen.io/tamak/pen/nquir?page=1&