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
| 이벤트 |
설명 |
마우스 및 키보드 이벤트 |
onclick |
이 이벤트는 마우스를 클릭할 때 발생합니다. |
ondblclick |
이 이벤트는 마우스를 두 번 클릭할 때 발생합니다. |
onmousedown | 이것 마우스를 눌렀을 때 이벤트가 발생합니다 |
onmouseup |
이 이벤트는 마우스를 눌렀다가 놓을 때 발생합니다 |
onmouscover |
이 이벤트는 마우스가 개체의 범위 위로 이동할 때 발생합니다 |
onmousemove |
이 이벤트는 마우스가 움직일 때 발생합니다 |
on the mouse 이 이벤트는 키를 눌렀을 때 발생합니다
|
onkeyup |
이 이벤트는 키보드의 키를 눌렀다가 떼면 발생합니다 |
| 페이지 관련 이벤트
onabort |
사진이 다운로드될 때 이 이벤트는 사용자에 의해 중단될 때 발생합니다 |
onbeforeunload |
이 이벤트는 현재 페이지의 내용이 변경되려고 할 때 발생합니다. |
onerror이 이벤트는 오류가 발생했을 때 발생합니다 |
|
onload |
페이지 콘텐츠가 완료되었을 때 발생합니다. 이 이벤트(즉, 페이지 로드 이벤트)
|
onresize |
이 이벤트가 발생합니다. 브라우저 창 크기가 변경될 때
|
onunload |
이 이벤트는 현재 페이지가 변경될 때 발생합니다
|
|
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 |
This 이벤트는 마우스로 개체를 컨테이너 범위로 드래그할 때 트리거됩니다 |
| ondragleave
이 이벤트는 마우스로 드래그 중인 개체가 컨테이너 범위를 벗어날 때 트리거됩니다 |
| ondragover
이 이벤트 드래그 중인 객체가 다른 객체의 컨테이너 범위 내에서 드래그될 때 트리거됩니다 |
ondragstart |
이 이벤트는 객체가 드래그되려고 할 때 트리거됩니다. |
| ondrop
이 이벤트는 마우스가 드래그 프로세스 중에 버튼이 해제되었습니다 |
| onlosecapture
요소가 마우스를 놓쳤을 때 이 이벤트는 선택한 포커스가 이동되었을 때 트리거됩니다 |
onpaste |
이 이벤트는 콘텐츠를 붙여넣을 때 트리거됩니다
|
onselect |
이 이벤트는 텍스트 콘텐츠가 선택될 때 트리거됩니다.
|
onselectstart |
텍스트가 선택될 때 이 이벤트는 콘텐츠 선택이 시작될 때 트리거됩니다.
|
|
Event |
설명 |
데이터 바인딩 이벤트 |
onafterupdate |
이 이벤트는 데이터가 데이터 소스에서 개체로의 전송을 완료할 때 트리거됩니다. |
oncellchange |
데이터 소스가 변경되면 이 이벤트가 발생합니다 |
데이터 사용 가능 |
데이터 수신이 완료되면 이벤트가 발생합니다 |
ondatasetchanged |
데이터 소스가 변경되면 이벤트가 발생합니다 |
ondatasetcomplete | 데이터 소스의 유효한 데이터를 모두 읽었을 때 이 이벤트가 트리거됩니다. |
onerrorupdate |
onbeforeupdate 이벤트 트리거를 사용하여 데이터 전송이 취소되면 afterupdate 이벤트 |
데이터 바인딩 이벤트가 대체됩니다. |
onrowenter |
current data 이 이벤트는 소스의 데이터가 변경되고 새로운 유효한 데이터가 있을 때 트리거됩니다. |
onrowexit |
이 이벤트는 현재 데이터 소스의 데이터가 변경되려고 할 때 트리거됩니다 |
onrowsdelete |
현재 데이터 레코드가 삭제될 때 트리거됩니다. 이 이벤트는 현재 데이터 소스가 새 데이터 레코드를 삽입하려고 할 때 트리거됩니다. | Dang 이 이벤트는 문서가 인쇄되려고 할 때 트리거됩니다.
| onfilterchange | 이 이벤트는 개체의 필터 효과가 변경될 때 발생합니다
onhelp | 시청자가 F1 키를 누르거나 브라우저의 도움말 메뉴를 클릭하면 이 이벤트가 발생합니다. |
| onpropertychange
이 이벤트는 다음과 같습니다. 객체의 속성 중 하나가 변경될 때 발생 |
| onreadystatechange
이 이벤트는 객체의 초기화 속성 값이 변경될 때 발생합니다 |
|
이벤트 핸들러 호출 |
|
이벤트 핸들러를 사용하여 작동할 때 페이지에서 가장 중요한 것은 객체의 이벤트를 통해 이벤트 핸들러를 지정하는 방법입니다.
| 1. JavaScript에서 |
JavaScript에서 이벤트 핸들러를 호출하려면 먼저 처리할 개체에 대한 참조를 얻은 다음 해당 이벤트에 실행할 처리 기능을 할당해야 합니다.
코드: | <input id="save" name="bt_save" type="button" value="保存" />
<script language="JavaScript" type="text/javascript">
var b_save=document.getElementById("save");
b_save.onclick=function(){
alert("单击了保存按钮");
}
</script> |
2. HTML에서 HTML에서 이벤트 핸들러를 지정하려면 HTML 태그에 해당 이벤트를 추가하고 실행할 코드나 함수 이름만 지정하면 됩니다. 그것. <input name="bt_save" type="button" value="保存" onclick="clickFunction();"/>
<script language="JavaScript" type="text/javascript">
function clickFunction(){
alert("单击了保存按钮");
}
</script> 【관련 추천: javascript 비디오 튜토리얼 , 프로그래밍 비디오】
|
|
위 내용은 자바스크립트 이벤트 처리 프로세스는 여러 단계로 구분됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!