[Day 26] 브라우저 자바스크립트

브라우저 자바스크립트

이벤트 객체

• 이벤트를 실제로 일으킨 부분과 이벤트 리스너가 등록된 부분은 다를 수 있다.
  • 이벤트가 어디서 어떻게 발생했는지 확실하게 파악해야 한다.
• e.target - 실제로 이벤트를 일으킨 요소
• e.currentTarget - 이벤트 전파 과정 중 현재 이벤트가 위치한 요소

폼 이벤트

• change - checkbox, radio 등의 타입을 갖는 input 요소나 select 요소에 선택이 일어났을 때 발생

• input - text 타입을 갖는 input 요소나 textarea 요소의 값이 변경되었을 때 발생

• focus - 키보드 포커스가 해당 요소에 옮겨졌을 때 발생

• blur - 키보드 포커스가 해당 요소에서 벗어났을 때 발생

• submit - 폼 전송이 일어났을 때 발생 (폼 내부에서 엔터 키가 입력되었을 때에도 발생)

• contenteditable - div 같은 입력요소가 아닌 요소도 input 이벤트가 발생할 수 있게끔 해준다.

• 실무차원에서 폼을 사용하는 방법

  • 요즘에는 실무에서 폼 태그 자체의 전송기능을 사용하지 않는다.
    • 대신, Javascript 에서 전송 기능을 처리한다.
  • 굳이 <form> 태그를 쓰지 않아도 alert가 뜨게 만들 수 있다. 하지만, <form> 태그를 사용하는 이유는?
    • 예를 들면, Enter 키를 누를 시 폼 내용이 자동으로 전송되는 기능이 편리해서

• .elements

  • 해당 요소 내부의 모든 요소를 가져온다.
  • 요소의 name 값을 속성으로 받아서 내부의 요소를 하나하나 선택하고, 그에 대한 처리를 할 수 있다.

  // JS로 폼의 사용자 입력값을 직접 검증할 수 있다!
  document.querySelector('form').addEventListener('submit', e => {
    const elements = e.target.elements;
    if (!elements.id.value || !elements.password.value) {
      e.preventDefault();
      alert('아이디와 비밀번호를 모두 입력하셔야 합니다.');
    }
  })
  

마우스 이벤트

• click / dblclick - 마우스 클릭 / 더블클릭
• mouseover / mouseout - 요소에 마우스 포인터가 들어왔을 때 / 나갔을 때
  • mouseenter / mouseleave 이랑 무슨 차이가 있나?
    • over / out 은 버블링이 일어나면서 자식 요소에서 이벤트가 발생할 때 부모 요소의 이벤트도 동시에 발생한다.
    • enter / leave는 버블링이 일어나지 않기 때문에 이벤트가 전파되지 않으면서 해당 요소에서의 이벤트만 일어난다.
• mousedown / mouseup - 요소 위에서 마우스 버튼을 눌렀을 때 / 놓았을 때
  • 요소 밖에서 떼면 mouseup 이벤트 발생하지 않는다.
• mousemove - 요소 위에서 마우스 포인터가 움직일 때마다

키보드 이벤트

• keydown / keyup - 키보드 버튼을 눌렀을 때 / 놓았을 때
  • 어떤 키가 눌렸는지 알고 싶다면 e.key 를 이용하자.
• keypress - 문자가 입력되었을 때
  • 조합이 지원되는 문자(한글 등..)은 잘 지원되지 않는다.

스크롤 이벤트

• scroll - 요소 내부의 콘텐츠가 스크롤될 때마다