쑥쑥자라기🌱

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가지로 나눠 볼 수 있습..

// 브라우저의 기본 동작 const link = document.querySelector('#link'); const checkbox = document.querySelector('#checkbox'); const input = document.querySelector('#input'); const text = document.querySelector('#text'); 대부분의 이벤트는 발생하는 순간 각 태그별로 혹은 문서 전체적인 측면에서 브라우저가 기본적으로 갖고 있는 어떤 동작들을 수행합니다. 예를 들어서 a 태그는 다른 태그와 다르게 클릭을 했을 때 href 속성에 담긴 주소로 웹 페이지가 이동하고 input 태그의 경우에도 타입별로 다양한 동작들이 있지만 체크박스는 클릭을 했을 때 체크가 토글..