쑥쑥자라기🌱

웹 페이지를 이용하다 보면 다양한 상황에서 스크롤바를 만나게 됩니다. css를 통해서 의도적으로 스크롤이 있는 요소를 만들지 않는 이상 일반적으로는 웹 문서의 크기가 브라우저의 창 크기보다 클 때 브라우저에 자연스럽게 나타납니다. //Scroll 이벤트 function printEvent(e) { console.log(e); } window.addEventListener('scroll', printEvent); 그래서 일반적으로 스크롤 이벤트는 브라우저를 대변하는 윈도우 객체의 이벤트 핸들러를 등록하는 경우가 많습니다. 코드를 실행해보면 웹 문서가 스크롤 될 때 이벤트 핸들러가 동작하는 모습을 확인할 수 있습니다. 그리고 이 스크롤 이벤트를 활용할 때 일반적으로는 윈도우 객체의 프로퍼티가 많이 활용되는데..

HTML 태그들 중에서 특별히 input 태그는 일반적으로 글을 입력하는 텍스트 타입과 입력값을 자동으로 가려주는 패스워드 타입, 그리고 단순히 클릭이 가능한 버튼 타입과 클릭을 통해서 선택과 해지가 가능한 체크박스 타입도 있습니다. 이 밖에도 다양한 타입들이 있지만 우리가 평소에 많이 접할 수 있는 타입은 이정도로 볼 수 있습니다. /** * [input 태그 다루기] * * > 포커스 이벤트 * focusin: 요소에 포커스가 되었을 때 * focusout: 요소에 포커스가 빠져나갈 때 * focus: 요소에 포커스가 되었을 때 (버블링 x) * blur: 요소에 포커스가 빠져나갈 때 (버블링 x) * * > 입력 이벤트 * input: 사용자가 입력을 할 때 * change: 요소의 값이 변했을 때..

키보드로 할 수 있는 이벤트 타입은 mousedown과 mouseup처럼 key를 누르는 순간에 발생하는 keydown, keypress와 key를 눌렀다 뗀 순간에 발생하는 keyup이 있습니다. 그리고 키보드 이벤트가 발생했을 때 자주 사용되는 이벤트 객체의 프로퍼티는 key와 code라는 프로퍼티입니다. 각 이벤트 타입과 프로퍼티들이 어떤 특징을 가지고 있는지 좀 더 자세하게 살펴보겠습니다. /** * [키보드 이벤트] * * > KeyboardEvent.type * keydown: 키보드 버튼을 누른 순간 * keypress: 키보드 버튼을 누른 순간 * keyup: 키보드 버튼을 눌렀다 뗀 순간 * * > KeyboardEvent.key * : 이벤트가 발생한 버튼의 값 * * > Keyboar..

마우스 이벤트 타입에는 mouseover, mouseout과 비슷한 mouseenter와 mouseleave라는 타입이 있습니다. 이름에서도 알 수 있듯이 mouseenter는 mouseover처럼 마우스 포인터가 요소 바깥에서 안쪽으로 들어갈 때, mouseleave는 mouseout처럼 마우스 포인터가 요소 안쪽에서 바깥으로 나갈 때 발생합니다. 일단 아래의 결과보기 버튼을 눌러서 코드를 한 번 실행해 봅시다. HTML CSS mouseover event count: 0 mouseenter event count: 0 위 코드에서는 mouseover와 mouseenter를 비교했지만, mouseout과 mouseleave의 관계도 동일하다는 점 참고해주세요! 아무튼, 이 둘의 차이를 살펴봅시다. 1. ..

/** * [마우스 이동 이벤트] * * > mouseEvent.target * : 이벤트가 발생한 요소 * * > mouseEvent.relatedTarget * : 이벤트가 발생하기 직전(또는 직후)에 마우스가 위치해 있던 요소 */ mouseover와 moseout을 살펴보겠습니다. 이벤트 객체의 타입 프로퍼티를 출력하는 이벤트 핸들러를 등록해주면 코드를 실행했을 때 마우스 포인터가 요소 안으로 들어갈 때 mouseover 밖으로 나올 때 mouseout 이벤트가 발생하는 걸 확인할 수 있습니다. 뿐만 아니라 버블링에 의해서 자식 요소끼리도 이벤트 핸들러가 동작하는 모습을 확인할 수가 있습니다. const box2 = querySelector('#box2'); function printEventDa..

1. clientX, clientY client 프로퍼티는 말 그대로 클라이언트 영역 내에서 마우스의 좌표 정보를 담고있는데요. 클라이언트 영역이란 이벤트가 발생한 순간에 브라우저가 콘텐츠를 표시할 수 있는 영역을 뜻합니다. clientX : 브라우저가 표시하는 화면 내에서 마우스의 X좌표 위치를 담고 있습니다. clientY : 브라우저가 표시하는 화면 내에서 마우스의 Y좌표 위치를 담고 있습니다. client 값은 그 순간 보여지는 화면을 기준으로 계산하기 때문에 스크롤 위치와는 무관하게 항상 보여지는 화면의 좌측 상단의 모서리 위치를 (0, 0)으로 계산합니다. 2. offsetX, offsetY offset 프로퍼티는 이벤트가 발생한 target이 기준이 됩니다. offsetX : 이벤트가 발생한..

마우스 이동과 관련된 이벤트 타입은 주로 이 세가지가 이용됩니다. /** * * * > MouseEvent.type * mousemove: 마우스 포인터가 이동할 때 * mouseover: 마우스 포인터가 요소 밖에서 안으로 이동할 때 * mouseout: 마우스 포인터가 요소 안에서 밖으로 이동할 때 */ 말 그대로 mousemove는 마우스가 이동할 때 발생하고 mouseover와 mouseout은 어떤 요소를 기준으로 마우스 포인터가 요소 밖에서 안으로 이동할 때 그리고 요소 안에서 밖으로 이동할 때 발생하는 이벤트입니다. 여기 box1 id를 가진 요소 위에서 마우스를 움직이면 콘솔에 마우스가 움직이고 있다는 메시지를 출력하는 이벤트 핸들러를 등록해 주었습니다. 코드를 저장하고 실행해보면 이렇게 ..

마우스 버튼으로 발생시킬 수 있는 이벤트 /** * [마우스 버튼 이벤트] * * > MouseEvent.button * 0: 마우스 왼쪽 버튼 * 1: 마우스 휠 * 2: 마우스 오른쪽 버튼 **/ 마우스의 각 버튼별로 이벤트를 구분하고 싶을 때는 MouseEvent 객체의 button 이라는 프로퍼티를 활용하면 됩니다. 왼쪽부터 0,1,2 순서인데요. 그래서 만약 노트북을 사용한다면 마우스 패드에는 가운데 휠이 잘 없기 때문에 마우스로 할 수 있는 이벤트들은 button 프로퍼티가 0 혹은 2로 나눠진다고 생각할 수가 있습니다. 그리고 이 두 버튼으로 할 수 있는 주요 동작들을 나눠보자면 왼쪽 버튼 클릭과 오른쪽 버튼 클릭 그리고 왼쪽 버튼을 두 번 클릭하는 더블클릭까지 총 3가지로 나눠 볼 수 있습..