>  기사  >  웹 프론트엔드  >  자바스크립트 이벤트 객체란 무엇인가요?

자바스크립트 이벤트 객체란 무엇인가요?

青灯夜游
青灯夜游원래의
2021-11-24 16:34:052658검색

JavaScript에서 이벤트 객체(event)는 이벤트가 발생할 때 관련 정보를 기록하는 데 사용되는 객체입니다. 이벤트 객체는 이벤트가 발생할 때만 생성되며 모든 이벤트에서 이벤트 처리 기능 내에서만 액세스할 수 있습니다. 함수 처리 실행 후 이벤트 객체는 소멸됩니다.

자바스크립트 이벤트 객체란 무엇인가요?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

이벤트 객체(event)란:

이벤트 객체는 어떤 이벤트가 발생할 때 관련 정보를 기록하는 데 사용되는 객체입니다.

이벤트 객체는 이벤트가 발생할 때만 생성되며, 이벤트 처리 기능 내에서만 접근할 수 있습니다. 모든 이벤트 처리 기능이 실행되면 이벤트 객체가 소멸됩니다!

참고: 실제로 이벤트는 항상 존재해 왔으며(바운드 또는 모니터링 여부에 관계없이) 이벤트 핸들러가 없습니다! ! !

JavaScript 이벤트는 브라우저나 문서 창에서 발생하는 특정 상호 작용 순간이며 JavaScript와 HTML 간의 상호 작용은 이벤트에 의해 트리거됩니다.

이벤트 핸들러:

이벤트 핸들러: 사용자의 페이지 클릭 동작, 마우스 이동 동작, 웹 페이지 로딩 완료 동작 등은 모두 이벤트 이름으로 불릴 수 있습니다.
즉, click, mousemove, load 등은 다음과 같습니다. 이벤트의 모든 이름. 이벤트에 응답하는 함수를 이벤트 핸들러 또는 이벤트 리스너라고 합니다.

이벤트 유형:

JavaScript의 이벤트는 일반적으로 일반 이벤트, 양식 이벤트, 페이지 이벤트의 세 가지 범주로 나뉩니다.

  • UI 이벤트: 로드, 언로드, 오류, 크기 조정, 스크롤, 선택, DOMActive 등은 사용자가 페이지의 요소와 상호 작용할 때 트리거됩니다.

  • Focus 이벤트: Blur, DOMFocusIn, DOMFocusOut, focus, focusin, focusout은 요소가 포커스를 얻거나 잃을 때 트리거됩니다. 이러한 이벤트 중에서 가장 중요한 이벤트는 흐림과 초점이 ​​필요한 것입니다. 주의하세요. 이 클래스 이벤트는 버블링되지 않습니다!

  • click, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup과 같은 마우스 및 휠 이벤트는 사용자가 마우스를 통해 페이지에서 작업을 수행할 때 트리거됩니다.

  • 스크롤 휠 이벤트: 마우스휠(IE6+에서 지원), DOMMouseScroll(FF에서 지원, 마우스휠과 동일한 효과). 마우스 휠을 사용할 때 트리거됩니다.

  • 텍스트 이벤트: textInput, 문서에 텍스트가 입력되면 트리거됩니다.

  • 키보드 이벤트: keydown, keyup, keypress는 사용자가 키보드를 통해 페이지에서 작업을 수행할 때 트리거됩니다.

  • Synthetic 이벤트: DOM3 레벨에 새로 추가되었으며 IME의 입력 시퀀스를 처리하는 데 사용됩니다. 소위 IME는 사용자가 실제 키보드에서 찾을 수 없는 문자를 입력할 수 있는 입력 방식 편집기를 말합니다. 구성시작, 구성업데이트, 구성종료라는 세 가지 이벤트가 있습니다.

  • 변경 이벤트: DOMsubtreeModified, DOMNodeInserted, DOMNodeRemoved, DOMAttrModified, DOMCharacterDataModified 등은 기본 DOM 구조가 변경될 때 트리거됩니다. IE8 - 지원되지 않습니다.

  • 이름 변경 이벤트: 요소 또는 속성 이름이 변경되면 트리거됩니다. 현재는 더 이상 사용되지 않습니다.

    기본적인 이벤트 종류에는 HTML5의 등장과 발전에 따라 HTML5 이벤트, 디바이스 이벤트(싱글 터치), 터치 이벤트, 터치 이벤트, 제스처 이벤트 등 다양한 이벤트가 추가되었습니다.

기타 이벤트는 다음과 같습니다.

리소스 이벤트

이벤트 이름 트리거될 때
error 리소스 로딩이 실패할 때.
abort 리소스 로딩이 중단된 경우.
load 리소스 및 관련 리소스가 로드되었습니다.
beforeunload 창, 문서 및 해당 리소스가 곧 언로드됩니다.
unload 문서 또는 종속 리소스를 언로드하는 중입니다.

네트워크 이벤트

이벤트 이름 실행되는 시기
online 브라우저가 네트워크에 액세스할 수 있게 되었습니다.
오프라인 브라우저에서 네트워크 액세스가 끊어졌습니다.

WebSocket 이벤트

이벤트 이름 트리거될 때
open WebSocket 연결이 설정되었습니다.
message WebSocket을 통해 메시지를 받았습니다.
error WebSocket 연결이 비정상적으로 종료되었습니다(예: 일부 데이터를 보낼 수 없음).
close WebSocket 연결이 종료되었습니다.

CSS 애니메이션 이벤트

이벤트 이름 트리거 시점
animationstart 특정 CSS 애니메이션이 시작될 때 트리거됩니다.
animationend CSS 애니메이션이 완료되면 트리거됩니다.
animationiteration CSS 애니메이션이 완료 후 다시 시작될 때 트리거됩니다.

CSS 전환 이벤트

이벤트 이름 실행 시기
transitionstart

듣기 전환 이벤트가 시작될 때 트리거됩니다.

transitionrun

전환 이벤트를 수신할 때 트리거됩니다.

transitionend

듣기 전환 이벤트가 끝나면 트리거됩니다.

인쇄 이벤트

이벤트 이름 실행 시기
beforeprint 프린터가 준비되면 실행됩니다.
afterprint 프린터가 꺼지면 트리거됩니다.

클립보드 이벤트

이벤트 이름 발생 시기
cut 선택한 텍스트 내용을 잘라내어 클립보드에 복사했습니다.
copy 선택한 텍스트 내용이 클립보드에 복사되었습니다.
paste 클립보드에서 복사한 텍스트 내용이 붙여넣어집니다.

【관련 추천: 자바스크립트 학습 튜토리얼

위 내용은 자바스크립트 이벤트 객체란 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.