자바스크립트 이벤트 처리 프로세스는 여러 단계로 구분됩니다.-프런트엔드 Q&A-php.cn

JavaScript 이벤트 처리 프로세스는 다음 세 단계로 구분됩니다. 1. 이벤트 발생 2. 이벤트 핸들러 시작 3. 이벤트 핸들러가 반응합니다. 그 중 이벤트 핸들러가 시작되기 위해서는 지정된 객체를 통해 해당 이벤트를 호출한 후 해당 이벤트를 통해 이벤트 핸들러를 호출해야 합니다.

자바스크립트 이벤트 처리 프로세스는 여러 단계로 구분됩니다.

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

JavaScript는 객체 기반 언어이며 가장 기본적인 기능 중 하나는 이벤트 중심입니다. 그래픽 인터페이스 환경에서 모든 작업을 단순화할 수 있습니다. 마우스나 단축키를 통한 동작을 이벤트라고 합니다. 마우스나 단축키에 의해 실행되는 일련의 프로그램 동작을 이벤트 드라이버라고 하며, 이벤트를 처리하는 프로그램이나 기능을 이벤트 핸들러라고 합니다.

이벤트 및 이벤트 처리 개요

이벤트 처리는 객체 기반 프로그래밍에서 매우 중요한 부분으로, 프로그램의 논리적 구조를 보다 명확하게 하고 프로그램을 보다 유연하게 하며 개발 효율성을 향상시킬 수 있습니다. 프로그램.

이벤트 처리 과정은 세 단계로 나뉩니다.

①이벤트가 발생합니다.
②이벤트 핸들러를 시작합니다.
3이벤트 핸들러가 반응합니다.

그 중 이벤트 핸들러가 시작되기 위해서는 지정된 객체를 통해 해당 이벤트를 호출한 후 해당 이벤트를 통해 이벤트 핸들러를 호출해야 합니다. 이벤트 핸들러는 JavaScript 문일 수 있지만 일반적으로 특정 사용자 정의 함수를 사용하여 이벤트를 처리합니다.

이벤트 및 이벤트 이름

이벤트는 스크립트를 통해 응답할 수 있는 일부 페이지 작업입니다. 사용자가 마우스 버튼을 누르거나, 양식을 제출하거나, 페이지에서 마우스를 움직일 때 이벤트가 발생합니다. 이벤트 핸들러는 항상 페이지의 특정 부분 및 특정 이벤트와 연결되는 JavaScript 코드 조각입니다. 이벤트 핸들러는 페이지의 특정 부분과 관련된 이벤트가 발생할 때 호출됩니다.

대부분의 이벤트 이름은 설명적이고 이해하기 쉽습니다. 예를 들어 click.submit.mousecover 등. 이름을 통해 그 의미를 짐작할 수 있습니다. 그러나 필드나 양식이 초점을 잃었음을 의미하는 Blur(문자 그대로 영어로 "blur"를 의미함)와 같이 이해하기 어려운 이름을 가진 몇 가지 이벤트도 있습니다. 일반적으로 이벤트 핸들러의 명명 원칙은 이벤트 이름 앞에 접두사 on을 추가하는 것입니다. 예를 들어 클릭 이벤트의 경우 핸들러 이름은 onclick입니다.

Common JavaScript events

on the mouse 이 이벤트는 키를 눌렀을 때 발생합니다 이 이벤트는 키보드의 키를 눌렀다가 떼면 발생합니다 페이지 관련 이벤트 페이지 콘텐츠가 완료되었을 때 발생합니다. 이 이벤트(즉, 페이지 로드 이벤트) 이 이벤트가 발생합니다. 브라우저 창 크기가 변경될 때 이 이벤트는 현재 페이지가 변경될 때 발생합니다

이벤트

설명

마우스 및 키보드 이벤트

onclick

이 이벤트는 마우스를 클릭할 때 발생합니다.

ondblclick

이 이벤트는 마우스를 두 번 클릭할 때 발생합니다.

onmousedown

이것 마우스를 눌렀을 때 이벤트가 발생합니다

onmouseup

이 이벤트는 마우스를 눌렀다가 놓을 때 발생합니다

onmouscover

이 이벤트는 마우스가 개체의 범위 위로 이동할 때 발생합니다

onmousemove

이 이벤트는 마우스가 움직일 때 발생합니다

onkeyup

onabort

사진이 다운로드될 때 이 이벤트는 사용자에 의해 중단될 때 발생합니다

onbeforeunload

이 이벤트는 현재 페이지의 내용이 변경되려고 할 때 발생합니다.

onerror이 이벤트는 오류가 발생했을 때 발생합니다

onload

onresize

onunload

이 이벤트는 뷰어의 시스템 클립보드에서 페이지로 콘텐츠를 붙여넣을 때 트리거됩니다 뷰어가 붙여넣을 때 시스템 클립보드의 내용을 대상 개체에게 알림 이 이벤트는 뷰어가 마우스 오른쪽 버튼을 눌렀을 때 메뉴가 나타날 때 또는 페이지 메뉴가 나타날 때 트리거됩니다. 키보드 키에 의해 실행 페이지의 현재 항목이 복사될 때 이 이벤트가 실행됩니다. 이 이벤트는 페이지에서 현재 선택한 콘텐츠가 잘릴 때 실행됩니다 객체를 드래그할 때 발생하는 이벤트입니다(활동 이벤트) 이 이벤트는 마우스 드래그가 종료될 때, 즉 마우스 버튼을 놓았을 때 발생합니다. This 이벤트는 마우스로 개체를 컨테이너 범위로 드래그할 때 트리거됩니다 ondragleave 이 이벤트는 마우스로 드래그 중인 개체가 컨테이너 범위를 벗어날 때 트리거됩니다 ondragover 이 이벤트 드래그 중인 객체가 다른 객체의 컨테이너 범위 내에서 드래그될 때 트리거됩니다 이 이벤트는 객체가 드래그되려고 할 때 트리거됩니다. ondrop 이 이벤트는 마우스가 드래그 프로세스 중에 버튼이 해제되었습니다 onlosecapture 요소가 마우스를 놓쳤을 때 이 이벤트는 선택한 포커스가 이동되었을 때 트리거됩니다 이 이벤트는 콘텐츠를 붙여넣을 때 트리거됩니다 이 이벤트는 텍스트 콘텐츠가 선택될 때 트리거됩니다. 텍스트가 선택될 때 이 이벤트는 콘텐츠 선택이 시작될 때 트리거됩니다.

Event

Description

Form 관련 이벤트

onblur

이 이벤트는 현재 요소가 포커스를 잃을 때 트리거됩니다.

onchange

현재 요소가 포커스를 잃습니다. 이 이벤트는 콘텐츠가 변경될 때 발생합니다

onfocus

이 이벤트는 요소가 포커스를 받을 때 발생합니다

onreset

이 이벤트는 양식의 RESET 속성이 활성화될 때 발생합니다

onsubmit

이 이벤트는 양식이 제출될 때 발생합니다.

스크롤링 자막 이벤트

onbounce

이 이벤트는 Marquce의 콘텐츠가 Marquce의 표시 범위 밖으로 이동할 때 발생합니다.

onfinish

Marquce 요소가 완료되면 이 이벤트는 Marquce 요소가 콘텐츠를 표시하기 시작할 때 발생합니다. 이 이벤트는 Marquce 요소가 표시되기 시작할 때 발생합니다. 이 이벤트는 현재 선택한 콘텐츠가 시청자의 시스템 클립보드에 복사되기 전에 발생합니다

onbeforecut

이 이벤트는 페이지의 콘텐츠 중 일부 또는 전부가 시청자의 시스템 클립보드에 잘릴 때 시작될 수 있습니다.

onbeforeeditfocus이 이벤트는 현재 요소가 편집 상태로 들어가려고 할 때 트리거됩니다.

onbeforepaste

onbeforeupdate

oncontextmenu

oncopy

oncut

ondrag

ondragend

ondragente

ondragstart

onpaste

onselect

onselectstart

로그인 후 복사

Dang 이 이벤트는 문서가 인쇄되려고 할 때 트리거됩니다. onfilterchange 이 이벤트는 개체의 필터 효과가 변경될 때 발생합니다 시청자가 F1 키를 누르거나 브라우저의 도움말 메뉴를 클릭하면 이 이벤트가 발생합니다. onpropertychange 이 이벤트는 다음과 같습니다. 객체의 속성 중 하나가 변경될 때 발생 onreadystatechange 이 이벤트는 객체의 초기화 속성 값이 변경될 때 발생합니다 이벤트 핸들러를 사용하여 작동할 때 페이지에서 가장 중요한 것은 객체의 이벤트를 통해 이벤트 핸들러를 지정하는 방법입니다. 1. JavaScript에서 JavaScript에서 이벤트 핸들러를 호출하려면 먼저 처리할 개체에 대한 참조를 얻은 다음 해당 이벤트에 실행할 처리 기능을 할당해야 합니다.

	Event	설명
데이터 바인딩 이벤트	onafterupdate	이 이벤트는 데이터가 데이터 소스에서 개체로의 전송을 완료할 때 트리거됩니다.
	oncellchange	데이터 소스가 변경되면 이 이벤트가 발생합니다
	데이터 사용 가능	데이터 수신이 완료되면 이벤트가 발생합니다
	ondatasetchanged	데이터 소스가 변경되면 이벤트가 발생합니다
	ondatasetcomplete	데이터 소스의 유효한 데이터를 모두 읽었을 때 이 이벤트가 트리거됩니다.
	onerrorupdate	onbeforeupdate 이벤트 트리거를 사용하여 데이터 전송이 취소되면 afterupdate 이벤트
데이터 바인딩 이벤트가 대체됩니다.	onrowenter	current data 이 이벤트는 소스의 데이터가 변경되고 새로운 유효한 데이터가 있을 때 트리거됩니다.
	onrowexit	이 이벤트는 현재 데이터 소스의 데이터가 변경되려고 할 때 트리거됩니다
	onrowsdelete	현재 데이터 레코드가 삭제될 때 트리거됩니다. 이 이벤트는 현재 데이터 소스가 새 데이터 레코드를 삽입하려고 할 때 트리거됩니다.

onhelp


	이벤트 핸들러 호출

	코드: