이벤트

• 이벤트
  • 마우스가 클릭/오버/이동
  • 키보드가 눌리거나 떼지는 것
  • 하나의 요소에 여러개의 이벤트를 적용할 수 있다.
• 이벤트 주는 방법

  1. 인라인 방식

     • HTML 태그에 요소(라인) 안에 속성처럼 on붙여서 명시
       ex) onclick, onmouse~, onkey~
       <div onclick = "함수()"></div>
     • 요소가 여러개일 때 하나하나 다 건드려야해서 유지보수에 좋지 않음.

  2. 이벤트 등록(이벤트 리스너)

     • 인라인 방식으로 주는 것 보단 이벤트 리스너 방식으로 주는 것을 추천한다.
       왜냐하면 해야할 내용이 많아질 수록 보기 힘들기 때문이다.
     • 요소.addEventListener('이벤트명', 실행할 함수)
     • 이벤트명을 쓸 때는 on을 쓰지 않음.
     • '함수()'로 쓰면 바로 사용되니까 '함수'명만 써놓기.

     let box = document.getElementsByClassName('box')[0];
     box.addEventListener('click', klick);
     
     function klick(){}

  3. 이벤트 등록 + 익명함수로 작성하기.

     let box = document.getElementsByClassName('box')[0];
     box.addEventListener('click', function(){});

     • 매개변수가 필요할 때도 익명함수로 작성하면 된다.

---

마우스 이벤트

마우스 클릭

• onclick
  • 한 번 클릭하면 작동
  • ondbclick과 함께 사용 불가.
    더블클릭을 하면 클릭을 처음 한 번 하는 순간 onclick 작동되고 그 다음에 ondbclick이 작동돼서 덮어씌워짐.
• ondblclick
  • 더블클릭하면 작동.

onmousemove

• 마우스 움직임 감지

마우스 오버

• onmouseover
  • 마우스 오버할 때
  • onmouseout과 같이 써야한다.
    왜냐하면 이건 오버할 때 적용해놓고 마우스 뗄 때의 코드가 별도로 없으면 적용해놓은 것들 유지된다.
    그래서 그냥 css hover를 쓰는 것이 좋다.
• onmouseout
  • 마우스 바깥으로 나갈 때
• onmouseenter
  • 마우스 오버할 때
  • onmouseleave와 같이 쓸 것.
• onmouseleave
  • 마우스 바깥으로 나갈 때
  • over/out은 자식영역으로 들어갈 때 out됐다가 자식 over되고 부모가 다시 over된다.
    enter/leave는 최신에 나온 것으로 얘는 자식에 들어가도 leave가 되지 않는다. 이 코드 사용하길 추천.

우클릭방지. (복사 방지)

• oncontextmenu
  oncontextmenu = "return false"
  : 우클릭 방지
• onselectstart
  onselectstart = "return false"
  : 드래그 블럭 선택 방지(글자)
• ondragstart
  ondragstart = "return false"
  : 드래그 방지(이미지)

스크롤

• window.scrollY, window.pageYOffset
  scrollY와 pageYOffset은 똑같음.

---

키보드 이벤트

keyCode

• 키보드 이벤트때 같이 사용되는 것.
  모든 키는 (코드)값을 가지고 있다.
• 키보드 각각의 키 마다 가지고 있는 고유의 값(정수)
  event.keyCode
  keyCode로 숫자인지/문자인지 체크할 수 있다.
  ex) 휴대폰번호입력 시 - 넣지말라고 했는데 넣었을 때 자동으로 지워지는 기능.
• 아래 3개 (특히 'enter') keyCode는 기억해두자!
  로그인할 때 잘 쓰인다.
  enter : 13
  backspace : 8
  esc : 27

onkeydown

• 키보드가 눌렸을 때
• 화면에 타이핑한 글자가 들어가기 전 동작

onkeyup

• 키보드를 누르고 뗐을 때
• 화면에 타이핑한 글자가 들어간 후 동작

onkeypress

• 안씀.
  한글, 특수문자 인식 안되는 것이 있다.