JavaScript 이벤트는 사용자가 웹페이지에 액세스함으로써 발생하는 일련의 작업입니다.
예를 들어, 사용자가 특정 작업을 수행하면 일련의 코드가 실행됩니다.
1가지 이벤트 소개
IE9/Firefox/Opera/Safari 및 Chrome은 모두 "DOM2 수준 이벤트" 모듈의 핵심 부분을 구현했습니다.
IE8 이전의 브라우저는 여전히 독점 이벤트 모델을 사용합니다.
JavaScript에는 인라인 모델/스크립트 모델과 DOM2 모델의 세 가지 이벤트 모델이 있습니다.
이 모델은 이벤트를 처리하는 가장 전통적이고 간단한 방법입니다.
인라인 모델에서 이벤트 핸들러는 지정된 이벤트를 처리하는 데 사용되는 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 = 함수(){
경고('이');
}
경고('이');
}
(3).keyup: 사용자가 키보드의 키를 놓을 때 트리거됩니다.
경고('이');
}
(1).load: 페이지가 완전히 로드되면(모든 이미지/JavaScript 파일/CSS 파일 및 기타 외부 리소스 포함) 창의 로드 이벤트가 트리거됩니다.
경고('이');
}
// DOM의 이미지 요소이든 HTML의 이미지 요소이든 관계없이 로드 이벤트가 이미지에 대해 트리거될 수도 있습니다.
// 추신: 새 이미지 요소가 문서에 추가된 후에 반드시 다운로드가 시작되는 것은 아닙니다. src 속성이 설정되어 있으면 다운로드가 시작됩니다.
// 개발자가 동적으로 로드된 JavaScript 파일이 로드되었는지 확인할 수 있도록
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
