JavaScript events_javascript 기술 소개-JS 튜토리얼-php.cn

JavaScript 이벤트는 사용자가 웹페이지에 액세스함으로써 발생하는 일련의 작업입니다.
예를 들어, 사용자가 특정 작업을 수행하면 일련의 코드가 실행됩니다.

1가지 이벤트 소개

이벤트는 일반적으로 브라우저와 사용자 작업 간의 상호 작용에 사용됩니다. 이벤트는 서버측 계산 로드를 공유하는 수단으로 IE와 Netscape Navigator에 처음 등장했습니다. DOM2 레벨 사양은 DOM 이벤트를 논리적인 방식으로 표준화하려고 시도하기 시작했습니다.

IE9/Firefox/Opera/Safari 및 Chrome은 모두 "DOM2 수준 이벤트" 모듈의 핵심 부분을 구현했습니다.
IE8 이전의 브라우저는 여전히 독점 이벤트 모델을 사용합니다.
JavaScript에는 인라인 모델/스크립트 모델과 DOM2 모델의 세 가지 이벤트 모델이 있습니다.

2 인라인 모델(HTML 이벤트 핸들러)

이 모델은 이벤트를 처리하는 가장 전통적이고 간단한 방법입니다.

인라인 모델에서 이벤트 핸들러는 지정된 이벤트를 처리하는 데 사용되는 HTML 태그의 속성입니다. 초기에는 인라인을 더 많이 사용했지만 HTML과 혼합되어 HTML과 분리되지 않았습니다.

이벤트 핸들러 기능을 HTML의 속성으로 사용하여 JS 코드를 실행합니다.
이벤트 처리 기능을 HTML의 속성으로 사용하여 JS 기능을 실행하세요.

JS 기능 실행;
추신: 이 함수는 window.onload 안에 배치되어서는 안 됩니다. 그렇지 않으면 표시되지 않습니다.

세 가지 스크립트 모델(DOM 레벨 0 이벤트 핸들러)

4가지 이벤트 처리 기능

//JavaScript가 처리할 수 있는 이벤트 유형은 마우스 이벤트/키보드 이벤트/HTML 이벤트입니다.
JavaScript 이벤트 처리 기능 및 사용 목록
이벤트 핸들러 기능 영향을 받는 요소 발생 시
onabort image 이미지 로딩이 중단된 경우;
초점이 개체에서 멀어질 때 창/프레임/모든 양식 개체를 흐리게 합니다.
입력 상자/선택 상자/텍스트 필드 변경 시 요소의 값을 변경하고 포커스를 잃을 때;
onclick 링크/버튼/양식 개체/이미지 등 사용자가 개체를 클릭할 때;
사용자가 개체를 두 번 클릭할 때 ondblclick 링크/버튼/양식 개체;
ondragdrop 창 사용자가 개체를 브라우저 창으로 끌어서 놓을 때;
스크립트에서 구문 오류가 발생할 때 onError 창/프레임/모든 양식 개체;
onfocus 창/프레임/모든 양식 개체 마우스를 클릭하거나 창이나 프레임에 마우스 움직임이 집중될 때;
onkeydown 문서/이미지/링크/양식 키를 눌렀을 때;
onkeypress document/image/connection/form 키를 눌렀다가 떼는 경우;
키를 놓았을 때 onkeyup 문서/이미지/링크/양식;
문서 또는 이미지가 로드된 후 본문/프레임세트/이미지를 로드합니다.
onunload body/frameset 문서 또는 프레임셋이 언로드된 후;
onmouseout 링크 아이콘이 링크를 제거할 때;
onmouseover link 마우스가 링크로 이동할 때;
onmove window 브라우저 창이 움직일 때;
onreset 양식 재설정 버튼 양식의 재설정 버튼을 클릭하세요.
onresize 창 브라우저 창의 크기를 변경할 때;
onselect 양식 요소 양식 객체를 선택할 때;
onsubmit form 양식을 서버로 보낼 때
// 추신: 각 이벤트마다 고유한 트리거 범위와 방법이 있으며 이벤트 처리가 유효하지 않습니다.

1. 페이지의 모든 요소에 의해 마우스 이벤트가 실행될 수 있습니다.

(1).click: 사용자가 마우스 버튼을 클릭하거나 Enter 키를 누를 때 트리거됩니다.
input.onclick = function(){
Alert('이');
};

(2).dblclick: 사용자가 마우스 버튼을 두 번 클릭할 때 트리거됩니다.
input.ondblclick = function(){
Alert('이');
}

(3).mousedown: 사용자가 마우스를 눌렀지만 아직 마우스를 올리지 않았을 때 트리거됩니다.
input.onmousedown = function(){
Alert('이');
}

(4)mouseup: 사용자가 마우스 버튼을 놓을 때 트리거됩니다.
input.onmouseup = function(){
경고('이');
}

(5).mouseover: 마우스가 요소 위로 이동할 때 트리거됩니다.
input.onmouseover = function(){
경고('이');
}

(6).mouseout: 마우스가 요소 밖으로 이동할 때 트리거됩니다.
input.onmouseout = function(){
경고('이');
}

(7).mousemove: 마우스 포인터가 요소 위에서 움직일 때 트리거됩니다.
input.onmousemove = function(){
경고('이');
}

2. 키보드 이벤트

(1).keydown: 사용자가 키보드의 아무 키나 누를 때 트리거됩니다. 길게 누르면 반복적으로 트리거됩니다. onkeydown = 함수(){
경고('이');
}

(2).keypress: 사용자가 키보드의 문자 키를 누를 때 트리거됩니다. 길게 누르면 반복적으로 트리거됩니다. onkeypress = function(){

경고('이');
}

(3).keyup: 사용자가 키보드의 키를 놓을 때 트리거됩니다.

onkeyup = 함수(){

경고('이');
}

3.HTML 이벤트

(1).load: 페이지가 완전히 로드되면(모든 이미지/JavaScript 파일/CSS 파일 및 기타 외부 리소스 포함) 창의 로드 이벤트가 트리거됩니다.

window.onload = 함수(){

경고('이');
}

// DOM의 이미지 요소이든 HTML의 이미지 요소이든 관계없이 로드 이벤트가 이미지에 대해 트리거될 수도 있습니다.

// 따라서 HTML의 모든 이미지에 대해 onload 이벤트 핸들러를 지정할 수 있습니다.

// 추신: 새 이미지 요소가 문서에 추가된 후에 반드시 다운로드가 시작되는 것은 아닙니다. src 속성이 설정되어 있으면 다운로드가 시작됩니다.

// 개발자가 동적으로 로드된 JavaScript 파일이 로드되었는지 확인할 수 있도록