javascript - Event(2)

codeit 으로 공부한 내용을 정리했습니다.

중급 한 개 토픽이 끝이 났는데.. 찝찝하다.;;
문제를 정답 안 보고는 풀 수가 없었다. 아놔...
중급 과정은 한 번 더 다시 들어야겠다.

마우스 이벤트

• button은 mouseEvent의 속성이다.

const flagBlue = document.querySelector('.flag-blue');
const flagWhite = document.querySelector('.flag-white');

function flagUp(e) {
  // 여기에 코드를 작성해 주세요.
  if (e.button === 0){ // 0: 왼쪽 버튼
    flagBlue.classList.add('up');
    // e.target.classList.add('up');
  } else if (e.button === 2){ // 2: 오른쪽 버튼
    flagWhite.classList.add('up');
  }

document.addEventListener('mousedown', flagUp);

마우스 이동 이벤트

MouseEvent.type

1. mousemove: 마우스 포인터가 이동할 때
   • MouseEvent.clientX, clientY
     - 화면에 표시되는 창 기준 마우스 포인터 위치
     • 이벤트가 발생한 순간에 브라우저가 콘텐츠를 표시할 수 있는 영역
   • MouseEvent.pageX, pageY:
     - 웹 문서 전체 기준 마우스 포인터 위치
     • 스크롤로 인해서 보이지 않게된 화면의 영역까지 포함
   • MouseEvent.offsetX, offsetY:
     - 이벤트가 발생한 target이 기준
     - 이벤트가 발생한 요소 기준 마우스 포인터 위치
2. mouseover: 마우스 포인터가 요소 밖에서 안으로 이동할 때
3. mouseout: 마우스 포인터가 요소 안에서 밖으로 이동할 때

아래 이벤트 타입은 버블링 현상이 발생하지 않는다.

1. mouseenter: 마우스 포인터가 요소 바깥에서 안쪽으로 들어갈 때
2. mouseleave: 마우스 포인터가 요소 안쪽에서 바깥으로 나갈 때

가장 큰 차이점은
mouseover/mouseout 의 이벤트 핸들러가 자식 요소까지 영향을 끼친다.(버블링 발생)
mouseenter/mouseleave 의 이벤트 핸들러가 자식 요소에는 영향이 없다.(버블링 x)

const box2 = document.querySelecotr('#box2');

function onMouse(){
	console.log('mouse is moving');
}

box1.addEventListener('mousemove', onMouseMove);

function onMouseMove(e) {
  console.log(`client: (${e.clientX}, ${e.clientY})`);
  console.log(`page: (${e.pageX}, ${e.pageY})`);
  console.log(`offset: (${e.offsetX}, ${e.offsetY})`);
  console.log('------------------------------------');
}

box2.addEventListener('mouseover', printEventData);

키보드 이벤트

• KeyboardEvent.type
  - keydown: 키보드 버튼을 누른 순간
  • keyup: 키보드 버튼을 눌렀다 땐 순간
  • keypress: 키보드 버튼을 누른 순간
    • 출력 값이 변하는 경우에만 이벤트 발생
      • 기능적인 역할은 발생 x
      • 여러번 누르는 경우 한 번만 발생
      • 권장하지 않는 방법 이라고 한다.!
• KeyboradEvent.key
  - 이벤트가 발생하는 버튼의 값
• KeyboradEvent.code
  - 누른 키의 물리적인 위치
  

원래 textarea 태그에 커서를 두고 enter 키 버튼을 누르면 줄바꿈이 됩니다. 이건 브라우저의 기본 동작이라고 한다.(아니 이런 부분을 처음 공부하는 사람이 어떻게 아냐고)

input 태그 다루기

input 태그는 다양한 타입

• type='text'
• type='password'
• type='button'
• tyoe='checkbox'

포커스 이벤트

• focusin: 요소에 포커스가 되었을 때
• focusout: 요소에 포커커스가 빠져나갔을 때
• focus: 요소에 포커스가 되었을 때 (버블링x)
• blur: 요소에 포커커스가 빠져나갔을 때 (버블링x)

입력 이벤트

• input: 사용자가 입력을 할 때
• change: 요소의 값이 변했을 때

다시 한 번 기억하기

자바스크립트로 HTML 태그의 비표준 속성을 활용할 때 HTML 태그에 data-* 형태로 작성하면 DOM의 dataset 프로퍼티를 활용하여 접근할 수 있다.

// example 예제
// 비표준 속성 태그 값이 data-title 인 경우
function func(e){
	if(e.target.dataset.title){
    	console.log('비표준 속성 태그');
    }
}