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..

111_자바스크립트 클릭 이벤트 사용하기 [적용] 버튼 클릭 시 작업을 처리하고 싶을 때 [문법] 이벤트 발생 타이밍 click 요소 클릭 시점 [내용] click 이벤트는 요소를 탭하거나 클릭 시 발생한다. 다음과 같이 버튼 요소에 click 이벤를 설정한다. 이 click 이벤트는 버튼 외에도 div 요소, a 요소 등 임의의 HTML 요소에 사용할 수 있다. HTML index.html JavaScript main.js document.querySelector('.button').addEventListener('click', () => { alert('버튼 클릭 이벤트 발생'); }); 버튼 클릭시 알림창이 표시된다. 참조 : 실무에 바로 적용하는 자바스크립트 코드레시피 278 아케다 야스노부, 카..

110_자바스크립트 페이지 로드 시 이벤트 사용하기 [적용] DOM 요소 엑세스 타이밍에 맞춰 작업을 처리하고 싶을 때 이미지 로딩이 완료된 후 작업을 처리하고 싶을 때 [문법] 이벤트 발생 타이밍 DOMContentLoaded HTML 문서 로딩 완료 시점 load 모든 리소스 로딩 완료 시점 [내용] 자바스크립트에서 DOM 요소의 조작 가능 시점은 HTML 문서의 로딩 완료 시점으로 이 시점에서 DOMContentLoaded 이벤트가 발생한다. 페이지 내 .box 요소의 개수를 세는 샘플을 확인해 보자. 다른 샘플과 달리 script 태그에 defer 속성을 부여하지 않는다. HTML index.html 박스 박스 박스 JavaScript main.js // DOM 엑세스 타이밍에 처리 실행 wond..

109_자바스크립트 이벤트 리스너 삭제하기 [적용] 이벤트 처리를 삭제하고 싶을 때 [문법] 메소드 의미 반환 이벤트타겟.removeEventListener(이벤트명, 리스너, [옵션*]) 이벤트 리스너 삭제 없음 *생략 가능 [내용] removeEventListener()를 사용해 이벤트 리스너 삭제가 가능하며, 이벤트 감시 작업을 취소할 수 있다. const box = document.querySelector('.box'); box.addEventListener('click', onClickButton); // 3초 후 리스너의 함수를 삭제 setTimeout(() => { box.removeEventListener('click', onClickButton); }, 3000); function onC..

108_자바스크립트 이벤트 리스너 1회 실행하기 [적용] 이벤트를 1회만 실행하고 싶을 때 [문법] 옵션 의미 타입 capture 이벤트 캡쳐 여부 진리값 once 리스터 1회 실행 여부 진리값 passive 패시프 이벤트 여부 진리값 [내용] addEventListener()의 세 번째 인수에 옶션을 지정할 수 있다. 반드시 모든 옵션을 설정할 필요는 없으며, 필요에 따라 설정이 가능하다. 예를 들어 이벤트를 1회만 실행하고자 할 경우는 once를 true로 설정한다. // 옵션 지정 const option = { once: true }; document.querySelector('.button').addEventListener('click', onClickButton, option); fuction ..