121_자바스크립트 키보드에서 입력된 키 정보 확인하기 [적용] 입력된 키에 따라 처리를 분류하고 싶을 때 [문법] 속성 의미 타입 키보드이벤트.key 눌러진 키의 값 문자열 키보드이벤트.code 눌러진 버튼의 코드 문자열 키보드이벤트.altKey 눌러진 키 값 확인 (Alt 키 여부) 진리값 키보드이벤트.ctrlKey 눌러진 키 값 확인 (Ctrl 키 여부) 진리값 키보드이벤트.shiftKey 눌러진 키 값 확인 (Shift 키 여부) 진리값 키보드이벤트.metaKey 눌러진 키 값 확인 (meta 키* 여부) 진리값 키보드이벤트.repeat 현재 키의 눌러진 상태 확인 진리값 키보드이벤트.isComposing 입력 중 상태 확인** 진리값 키보드이벤트.keyCode 눌러진 키의 아스키(ASCII) 코..

120_자바스크립트 키보드 입력 이벤트 처리하기 [적용] 문자를 입력할 때마다 잡억을 실행하고 싶을 때 [문법] 이벤트 발생 타이밍 keydown 키를 누르는 시점 keyup 누를 키를 뗴는 시점 keypoess 문자 키가 눌려진 시점 [내용] keydown, keyup, keypress 는 키 입력을 감시하는 이벤트로, 각각의 이벤트가 발생하는 시점이 다르다. 다음 샘플을 확인해 보자. HTML index.html JavaScript main.js document.querySelector('.textarea').addEventListener('keydown', () => { console.log('키가 눌러졌습니다.'); }); document.querySelector('.textarea').addEv..

119_자바스크립트 터치 이벤트 정보 확인하기 [적용] 마우스 움직임에 따라 작업을 처리하고 싶을 때 터치에 반응하는 요소를 처리하고 싶을 때 [문법1] 속성 내용 타입 event.changedTouches 터치 정보(Thoch 객체) 배열 배열 [문법2] 속성 내용 타입 터치정보.clientX 브라우저 좌측 상단 기준 X 좌표 숫자 터치정보.clientY 브라우저 좌측 상단 기준 Y 좌표 숫자 터치정보.offsetX 요소 좌측 상단 기준 X 좌표 숫자 터치정보.offsetY 요소 좌측 상단 기준 Y 좌표 숫자 터치정보.pageX 페이지 좌측 상단 기준 X 좌표 숫자 터치정보.pageY 페이지 좌측 상단 기준 Y 좌표 숫자 터치정보.screenX 디바이스 좌측 상단 기준 X 좌표 숫자 터치정보.scree..

118_자바스크립트 터치 이벤트 처리하기 [적용] 스마트폰에서 화면 터치에 반응하는 처리를 하고 싶을 때 [문법] 이벤트 발생 타이밍 touchstart 터치 시작 시점 touchmove 터치 포인트를 움직이는 시점 touchend 터치 종료 시점 [내용] 터치 가능 디바이스는 시작, 이동, 종료의 터치 이벤트가 발생한다.터치 이벤트를 감지하여 로그로 출력하는 샘플을 확인해 보자. HTML index.html 터치가 가능한 디바이스에서 확인해 주세요.

117_자바스크립트 텍스트 선택 이벤트 처리하기 [적용] 텍스트 선택 시점에 작업을 처리하고 싶을 때 텍스트 선택 시점의 작업을 무효화하고 싶을 때 [문법] 이벤트 발생 타이밍 selectstart 텍스트 선택 시점 [내용] selectstart 이벤트는 텍스트의 선택 시점에 발생한다. HTML index.html 안녕하세요. JavaScript main.js document.querySelector('.paragraph').addEventListener('selectstart', () => { console.log('텍스트가 선택되었습니다.'); }); [예시] 선택한 문자열을 말풍선으로 표시하는 샘플을 확인해 보자. 1. selectstart 이벤트로 텍스트 선택 발생 확인 2. mouseup 이벤트..

116_자바스크립트 스크롤 이벤트 처리하기 [적용] 스크롤 분량에 따라 요소의 표시를 지연시키고 싶을 때 [문법] 이벤트 발생 타이밍 scroll 대상 요소의 스크롤 작업 [내용] scroll 이벤트는 대상 요소의 스크롤 작업 실행 시 발생하며, 주로 wondow 객체에서 사용된다. 세로는 window.scrollY, 가로는 window.scrollX로 확인 가능하며, 스크롤 분량에 따라 처리를 구분하고 싶을 때 유용하다. // 스크롤 시 문구와 함께 좌표가 출력 window.addEventListener('scroll', () => { console.log('스크롤 작업', window.scrollX, window.scrollY); }); 참조 : 실무에 바로 적용하는 자바스크립트 코드레시피 278 아..

115_자바스크립트 마우스 좌표 확인하기 [적용] 마우스의 클릭 위치를 확인하고 싶을 때 마우스 움직임에 따라 요소를 반응시키고 싶을 때 [문법] 속성 내용 타입 event.clientX 브라우저 좌측 상단 기준 X 좌표 숫자 event.clientY 브라우저 좌측 상단 기준 Y 좌표 숫자 event.offsetX 요소 좌측 상단 기준 X 좌표 숫자 event.offsetY 요소 좌측 상단 기준 Y 좌표 숫자 event.pageX 페이지 좌측 상단 기준 X 좌표 숫자 event.pageY 페이지 좌측 상단 기준 Y 좌표 숫자 event.screenX 디바이스 좌측 상단 기준 X 좌표 숫자 event.screenY 디바이스 좌측 상단 기준 Y 좌표 숫자 [내용] click 이벤트와 mousemove 이벤트..

114_자바스크립트 마우스 오버 이벤트 사용하기 (이벤트 버블링) [적용] 마우스 오버 작업을 처리하고 싶을 때 [문법] 이벤트 발생 타이밍 mouseover 포인팅 디바이스가 요소의 위치에 있을 때 (이벤트 버블링) mouseout 포인팅 디바이스가 요소를 벗어날 때 (이벤트 버블링) [내용] mouseover와 mouseout 이벤트는 포인팅 디바이스(마우스, 터치 패드 등)가 요소 위에 있거나 요소를 벗어날 때 발생하는 이벤트로 mouseenter, mouseleave와 다르게 이벤트 버블링이 일어난다. 버블링이란, 자식 요소에서 발생한 이벤트가 부모 요소까지 전달되는 것을 말한다. 예를 들어 버블링이 일어나는 mouseover의 이벤트 리스너를 부모와 자식 요소 모두에 설정하면, 자식 요소에서 발..

113_자바스크립트 마우스 오버 이벤트 사용하기 [적용] 마우스 오버 작업을 처리하고 싶을 때 [문법] 이벤트 발생 타이밍 mouseenter 포인팅 디바이스가 요소의 위치에 있을 때 mouseleave 포인팅 디바이스가 요소를 벗어날 때 [내용] mouseenter와 mouseleave 이벤트는 포인팅 디바이스(마우스, 터치 패드 등)가 요소 위에 있거나 요소를 벗어날 때 발생하는 이벤트다. HTML index.html JavaScript main.js document.querySelector('.box').addEventListener('mouseenter', () => { console.log('포인팅 디바이스가 .box 요소 위에 있음'); }); document.querySelector('.bo..

112_자바스크립트 마우스 조작 이벤트 사용하기 [적용] 마우스 움직임에 따라 이미지에 애니메이션 효과를 주고 싶을 때 마우스 움직임에 따라 작업을 처리하고 싶을 때 [문법] 이벤트 발생 타이밍 mousedown 마우스 버튼을 누르는 시점 mouseup 마우스 버튼을 떼는 시점 mousemove 마우스를 움직이는 시점 [내용] 마우스의 움직임과 관련된 세세한 조작은 클릭 이벤트만으로는 부족하다. 마우스 클릭 시점과 떼는 시점, 그리고 움직이는 시점과 관련된 기능의 이벤트를 확인해 보자. 마우스 이벤트의 정보를 가져오고 싶은 DOM 요소에 각각의 이벤트를 설정한다. main 클래스 지정 요소(조작 영역)에서 마우스 움직임에 따라 로그를 출력하는 샘플을 확인해 보자. HTML index.html JavaSc..