Frontend/JavaScript60 [Javascript] 마우스 이벤트 마우스 이벤트 종류 ✔️ mousedown/mouseup : 요소 위에서 마우스 왼쪽 버튼을 누를때, 뗄 때 발생 ✔️ mouseover/mouseout : 마우스 커서가 요소 바깥에 있다가 요소 안으로 움직였을 때/ 밖으로 움직일 때 발생 ✔️ mousemove : 마우스를 움직일 떄 ✔️ click : 마우스 왼쪽 버튼을 사용해 동일한 요소 위에서 mousedown,mouseup 이벤트를 연달아 발생시킬 때 실행 마우스 이벤트 순서 ✔️ 마우스 이벤트는 사용자가 단 하나의 동작을 했어도 실행되는 이벤트가 여러개일 수 있음. ✔️ 예를 들어 한번 클릭했을 때 mousedown -> mouseup -> click 이렇게 발생함. Reference https://ko.javascript.info/mouse.. 2022. 1. 16. [Javascript] 브라우저 기본 동작 브라우저 기본 동작 막기 ✔️ event.preventDefault() 메서드 이용하기 ✔️ on를 사용해 할당했을 때 false 반환 각 이벤트에 대응하는 브라우저 기본 동작 ✔️ mousedown : 마우스가 움직인 곳에서 선택을 시작 ✔️ : click - input을 선택/선택해제 함 ✔️ submit : 폼 안에서 을 클릭하거나 Enter를 누르면 이 이벤트가 발생하고, 브라우저는 폼을 서버로 전송함 ✔️ keydown : 키를 누르면 텍스트 박스에 글자를 추가하거나 그 외의 다른 동작을 수행함. ✔️ contextmenu : 마우스 오른쪽 버튼을 클릭하면 발생하는 이벤트 Reference ✔️ https://ko.javascript.info/default-browser-action 2022. 1. 16. [Javascript] 브라우저 이벤트 소개 유용한 DOM 이벤트 ✔️ 마우스 이벤트 click : 마우스 왼쪽 버튼, 터치스크린에서는 탭했을 때 발생 contextmenu : 요소 위에서 마우스 오른쪽 버튼 눌렀을 때 발생 mouseover / mouseout : 마우스 커서가 요소 위로 움직였을 때, 커서가 요소 밖으로 움직였을 때 mousedown / mouseup : 요소 위에서 마우스 왼쪽 버튼을 누르고 있을 떄 / 뗄 때 발생 mousemove : 마우스를 움직일 때 발생 ✔️ 폼 요소 이벤트 submit : 사용자가 을 제출했을 때 발생 focus : 사용자가 과 같은 요소에 포커스 했을 때 발생 ✔️ 키보드 이벤트 keydown / keyup : 사용자가 키보드 버튼을 누르거나 뗄 때 발생 ✔️ 문서 이벤트 DOMContentLoad.. 2022. 1. 14. [Javascript] 좌표 getBoundingClientRect 로 요소 좌표 얻기 ✔️ x와 y : 요소를 감싸는 네모의 창 기준 x, y 좌표 ✔️ width/height : 요소의 너비/높이 ✔️ top/bottom : 요소릘 감싸는 네모의 위쪽 모서리/아래쪽 모서리의 y 좌표 ✔️ left/right : 요소를 감싸는 네모의 왼쪽 모서리/오른쪽 모서리의 x 좌표 elementFromPoint(x,y) ✔️ 창 기준 좌표(x,y) 에서 가장 가까운 중첩 요소를 반환 ✔️ 문법 let elem = document.elementFromPoint(x, y); 요소를 창 내 특정 좌표에 고정하기 ✔️ getBoundingClientRect idididi Reference https://ko.javascript.info/coordi.. 2022. 1. 13. [Javascript] 브라우저 창 사이즈와 스크롤 브라우저 창의 너비와 높이 ✔️ document.documentElement.clientWidth ✔️ document.documentElement.clientheight 스크롤 정보 얻기 ✔️ window.pageXoffset : 세로 스크롤에 의해 가려진 위쪽 영역 높이 ✔️ window.pageYoffset : 가로 스크롤에 의해 가려진 왼쪽 영역 높이 scrollTo, scrollBy 로 스크롤 상태 변경하기 ✔️ window.scrollBy(x,y) : 현재 위치를 기준으로 상대적으로 값을 조정한다. ✔️ window.scrollTo(x,y) : 절대 좌표를 기준으로 페이지 스크롤 상태를 변경한다. scrollIntoView ✔️ 해당 요소가 창 제일 위로, 창 가장 아래로 보이도록 스크롤 상태.. 2022. 1. 13. [Javascript] 요소 사이즈와 스크롤 기하 프로퍼티 offsetParent / offsetLeft / offsetTop ✔️ offset은 요소가 화면에서 차지하는 영역 전체 크기를 나타냄. ✔️ 요소의 너비 + padding + 스크롤바 + 테두리를 합친 크기 ✔️ margin 포함 ❌ offsetParent 좌표 계산에 사용되는 가장 가까운 조상 요소의 참조를 반환 offsetLeft/offsetTop offsetParent를 기준으로 각각 요소가 오른쪽, 아래쪽으로 얼마나 떨어져 있는지를 나타낸다. offsetWidth / offsetHeight ✔️ 테두리를 포함한 요소 전체의 사이즈 정보를 제공 clientTop / clinetLeft ✔️ 요소의 테두리(border)의 값을 반환한다. clientWidth / clienthHeig.. 2022. 1. 13. 이전 1 2 3 4 5 ··· 10 다음 반응형
