JavaScript 공통 이벤트 유형 정리

이 글은 javascript에 대한 관련 지식을 제공합니다. 마우스 이벤트, 키보드 이벤트 등 일반적인 JavaScript 이벤트 유형에 대한 관련 문제를 주로 소개합니다. 모두에게 도움이 되기를 바랍니다. .

【관련 추천: javascript video tutorial, web front-end】

Mouse event

Event type

• click: 사용자가 메인 마우스 버튼(보통 왼쪽 버튼)을 클릭합니다. 버튼) 또는 초점을 맞추는 동안 Enter 키를 누를 때 트리거됩니다.
• dblclick: 사용자가 기본 마우스 버튼을 두 번 클릭할 때 트리거됩니다(빈도는 시스템 구성에 따라 다름).
• mousedown: 사용자가 마우스 버튼을 누를 때 트리거됩니다.
• mouseup : 사용자가 마우스를 들어올릴 때 트리거됩니다. 키를 누를 때 트리거됩니다.
• mousemove: 마우스가 요소 위에서 움직일 때 트리거됩니다.
• mouseover: 마우스가 요소에 들어갈 때 트리거됩니다.
• mouseout: 마우스가 요소를 떠날 때 트리거됩니다
• mouseenter: 마우스가 요소에 들어갈 때 트리거되며 이 이벤트는 버블링되지 않습니다.
• mouseleave: 마우스가 요소를 떠날 때 트리거되며 이벤트는 버블링되지 않습니다.

차이:

• 상관 및 종료 여부에 관계없이 상위 요소에서 하위 요소로 이동하는 하위 요소는 여전히 떠나는 것으로 간주됩니다.
• 입력 및 종료, 하위 요소를 고려하면 하위 요소는 여전히 상위 요소의 일부입니다.
• mouseenter 및 mouseleave는 버블링되지 않습니다.

이벤트 객체

모든 마우스 이벤트, 이벤트 핸들러 이벤트 객체는 모두 MouseEvent

• altKey: 이벤트가 발생했을 때 키보드의 Alt 키를 눌렀는지 여부
• ctrlKey: 이벤트가 발생했을 때 키보드의 Ctrl 키를 눌렀는지 여부에 따라 트리거됩니다
• shiftKey: 이벤트가 발생할 때 키가 눌렸는지 여부 키보드의 Shift 키를 누릅니다
• 버튼: 이벤트가 트리거될 때 마우스 버튼 입력
  • 0: 왼쪽 버튼
  • 1: 가운데 버튼
  • 2: 오른쪽 버튼

Position

• page: pageX , pageY, 페이지에서 현재 마우스 거리의 가로 및 세로 좌표
• client: clientX, clientY, 뷰포트를 기준으로 한 마우스 좌표
• offset: offsetX, offsetY, 이벤트 소스의 내부 여백을 기준으로 한 마우스 좌표
• screen: screenX, screenY, 마우스를 기준으로 함 화면
• x, y, clientX와 동일, clientY
• movement: movementX, movementY, 마우스 이동 이벤트에서만 유효, 마지막 마우스 위치 기준, 오프셋 거리

키보드 이벤트

이벤트 유형

• keydown: 키보드의 아무 키나 누를 때 트리거됩니다. 이 이벤트는 반복적으로 트리거됩니다.
• keypress: 키보드에서 문자 키를 누를 때 트리거됩니다.
• keyup: 키보드에서 아무 키나 떼면 발생합니다.

keydown, keypress를 트리거합니다. 이벤트의 기본 동작이 차단되면 텍스트가 표시되지 않습니다.

Event object

KeyboardEvent

• code: 키 문자열을 가져와 키보드 레이아웃에 적용합니다.
• key: 키보드 레이아웃에 적합하지 않은 키 문자열을 가져옵니다. 인쇄된 문자를 얻을 수 있습니다.
• keyCode: 키보드 코드 가져오기

Form 이벤트

• focus: 요소에 포커스가 있을 때 트리거됨(사용자와 상호작용할 수 있는 요소에 포커스를 둘 수 있음), 이 이벤트는 버블링되지 않습니다
• 흐림: 요소가 초점을 잃을 때 트리거되며 이 이벤트는 버블링되지 않습니다.
• submit: 양식 이벤트 제출, 양식 요소에서만 유효합니다.
• change: 텍스트 변경 이벤트
• input: 텍스트 변경 이벤트, 즉시 실행됨

Other events

window global object

• load, DOMContentLoaded, Readystatechange

window load: 페이지의 모든 리소스가 로드되었습니다.
이미지 로드: 이미지 리소스가 로드되는 이벤트

브라우저에서 페이지를 렌더링하는 과정:

1. 페이지 소스 코드 가져오기
2. 문서 노드 만들기
3. 위에서 아래로 DOM 트리에 요소를 추가합니다. 요소가 추가될 때마다 사전 렌더링
4. 은 구조

Document의 DOMContentLoaded에 따라 순서대로 하위 노드를 렌더링합니다. DOM 트리가 빌드된 후에 발생합니다

readystate(페이지에는 세 가지 상태가 있습니다
). loading(로딩), Interactive(인터랙티브), 완료(completed)

interactive: DOMContentLoaded 이벤트 트리거

complete: 창의 로드 이벤트 트리거

readystatechange(페이지 상태가 변경될 때 트리거됨 //변경된 상태로 복귀)

Node.js 코드는 최대한 페이지 하단에 작성해야 합니다

• css는 페이지 상단에 작성해야 합니다: 깜박임을 방지하려면(페이지 하단에 배치하면 먼저 요소에 스타일이 없게 되고 보기 흉한 기본 스타일을 사용한 다음 CSS 파일을 읽은 후 스타일을 변경하세요)

• JS는 페이지 하단에 작성해야 합니다: 후속 렌더링을 차단하는 것을 방지하고 JS를 실행할 때 페이지의 요소를 가져오지 못하는 것을 방지합니다.

• unload, beforeunload

beforeunload: 창 이벤트, 창이 닫힐 때 실행, 창이 닫히는 것을 방지할 수 있음
unload: 창 이벤트, 창이 닫힐 때 실행

• scroll

창이 스크롤될 때 실행 이벤트

scrollTop 및 scrollLeft를 통해 스크롤 거리를 가져오고 설정할 수 있습니다.

• resize

창 크기가 변경되면 이벤트가 실행되어 뷰포트 크기를 모니터링합니다.

복사 이벤트

cut

여러 거리 사진

요소 위치

offsetParent
특정 요소의 첫 번째 요소 가져오기 위치가 지정된 조상 요소, 없으면 가져오기 body
body의 offsetParent는 null

offsetLeft, offsetTop //위치된 요소로부터의 거리는 요소에 대한 offsetParent의 좌표입니다

요소에 대한offsetParent가 body인 경우 다음과 같이 처리합니다. 전체 웹페이지

• getBoundingClientRect 메소드

이 메소드는 뷰포트를 기준으로 요소의 거리를 기록하는 객체를 가져옵니다.

이벤트 시뮬레이션

click은 클릭을 시뮬레이션합니다.

sumbit은 제출 양식을 시뮬레이션합니다.

• Event 시뮬레이션 이벤트

기타 보충

window.scrollX, window.pageXOffset, window.scrollY, window.pageYOffsetwindow.scrollX, window.pageXOffset: 루트 요소

window.scrollY의 scrollLeft와 동일합니다. window .pageYOffset: 루트 요소의 scrollTop과 동일
• scrollTo, scrollBy
• scrollTo: 스크롤 막대 위치 설정 //window.scrollTo(x, y) 모든 DOM 개체는

scrollBy를 사용할 수 있습니다. 원래 기준 및 y축 거리 window.scrollBy(x, y)

resizeTo, resizeBy

[관련 권장 사항:

javascript 비디오 튜토리얼

,

웹 프론트 엔드

]

위 내용은 JavaScript 공통 이벤트 유형 정리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!