티스토리 뷰

Javascript

자바스크립트 - 이벤트 객체

오이연우오 2022. 4. 17. 23:19

    • 01. 이벤트 메서드 : addEventListener('click') : 클릭했을 때
    • 02. 이벤트 메서드 : addEventListener('scroll') : 스크롤 했을 때
    • 03. 이벤트 메서드 : addEventListener('resize') : 브라우저 사이즈 변경 됐을 때
    • 04. 이벤트 메서드 : addEventListener('selectstart') : 텍스트 선택을 시작 했을 때
    • 05. 이벤트 메서드 : addEventListener('visibilitychange') : 브라우저의 탭 상태가 변경 했을 때
    • 06. 이벤트 메서드 : addEventListener('DOMContentLoaded') : 로딩이 된 후

 

    • 07. 이벤트 메서드 : addEventListener('mousedown') : 마우스 버튼을 눌렀을 때
    • 08. 이벤트 메서드 : addEventListener('mouseup') : 마우스 버튼을 떼는 경우
    • 09. 이벤트 메서드 : addEventListener('mousemove') : 마우스를 움직이는 경우
    • 10. 이벤트 메서드 : addEventListener('mouseenter') : 포인터가 요소의 위치에 잇을 때
    • 11. 이벤트 메서드 : addEventListener('mouseleave') : 포인터가 요소의 위치를 벗어났을 때
    • 12. 이벤트 메서드 : addEventListener('mouseover') : 포인터가 요소의 위치를 벗어났을 때(이벤트 버블링)
    • 13. 이벤트 메서드 : addEventListener('mouseout') : 포인터가 요소의 위치를 벗어났을 때(이벤트 버블링)

 

    • 14. 이벤트 속성 : 마우스 : MouseEvent.clientX : 브라우저 기준 X좌표
    • 15. 이벤트 속성 : 마우스 : MouseEvent.clientY : 브라우저 기준 Y좌표
    • 16. 이벤트 속성 : 마우스 : MouseEvent.offsetX : 요소 기준 X좌표
    • 17. 이벤트 속성 : 마우스 : MouseEvent.offsetY : 요소 기준 Y좌표
    • 18. 이벤트 속성 : 마우스 : MouseEvent.pageX : 페이지 기준 X좌표
    • 19. 이벤트 속성 : 마우스 : MouseEvent.pageY : 페이지 기준 Y좌표
    • 20. 이벤트 속성 : 마우스 : MouseEvent.screenX : 디바이스 기준 X좌표
    • 21. 이벤트 속성 : 마우스 : MouseEvent.screenY : 디바이스 기준 Y좌표

 

    • 22. 이벤트 메서드 : addEventListener('touchstart') : 터치가 시작 됐을 때
    • 23. 이벤트 메서드 : addEventListener('touchmove') : 터치가 움직이고 있을 때
    • 24. 이벤트 메서드 : addEventListener('touchend') : 터치가 끝났을 때

 

    • 25. 이벤트 메서드 : addEventListener('keydown') : 키를 눌렀을 때(한번만 실행)
    • 26. 이벤트 메서드 : addEventListener('keypress') : 키를 눌렀을 때(누르고 있으면 계속 실행)
    • 27. 이벤트 메서드 : addEventListener('keyup') : 키를 누르고 땠을 때

 

    • 28. 이벤트 속성 : 키보드 : event.key : 눌러진 키의 값
    • 29. 이벤트 속성 : 키보드 : event.code : 눌러진 버튼의 코드
    • 30. 이벤트 속성 : 키보드 : event.altKey : 눌러진 버튼의 코드
    • 31. 이벤트 속성 : 키보드 : event.ctrlKey : 눌러진 버튼의 코드
    • 32. 이벤트 속성 : 키보드 : event.shiftKey : 눌러진 버튼의 코드
    • 33. 이벤트 속성 : 키보드 : event.metaKey : 눌러진 버튼의 코드
    • 34. 이벤트 속성 : 키보드 : event.repeat : 눌러진 버튼의 코드
    • 35. 이벤트 속성 : 키보드 : event.isComposing : 눌러진 버튼의 코드
    • 36. 이벤트 속성 : 키보드 : event.keyCode : 눌러진 버튼의 코드

 

    • 37. 이벤트 메서드 : addEventListener('dragstart') : 드래그 시작 했을 때
    • 38. 이벤트 메서드 : addEventListener('drag') : 드래그 중인 경우
    • 39. 이벤트 메서드 : addEventListener('dragend') : 드래그 끝났을 때
    • 40. 이벤트 메서드 : addEventListener('dragenter') : 요소의 위치에 드래그 했을 때
    • 41. 이벤트 메서드 : addEventListener('dragover') : 요소의 위치 위에 있을 때
    • 42. 이벤트 메서드 : addEventListener('dragleave') : 요소의 위치 위에서 벗어 났을 때
    • 43. 이벤트 메서드 : addEventListener('drop') : 요소의 위치에 드롭 했을 때

 

  • 44. 이벤트 메서드 : preventDafault() : 이벤트 작동 해지
  • 45. 이벤트 메서드 : dispatchDafault() : 이벤트 작동 해지

이벤트 객체 참고 사이트>>

댓글
© 2018 webstoryboy