JavaScript 입문 튜토리얼(11) js 이벤트 처리_기본 지식

이벤트 처리 개요
이벤트 처리는 객체 기반 프로그래밍에서 매우 중요한 부분입니다. 이벤트 처리가 없으면 프로그램이 종료되고 유연성이 부족해집니다. 이벤트 처리 프로세스는 다음과 같이 표현될 수 있습니다. 이벤트 발생 - 이벤트 핸들러가 시작됨 - 이벤트 핸들러가 반응합니다. 그중에서도 이벤트 핸들러가 시작되기 위해서는 먼저 어떤 일이 발생하면 시작할 핸들러를 객체에 알려야 합니다. 그렇지 않으면 프로세스를 계속할 수 없습니다. 이벤트 핸들러는 JavaScript 문일 수 있지만 일반적으로 특정 사용자 정의 함수를 사용하여 작업을 처리합니다.
이벤트 핸들러를 지정하는 방법에는 세 가지가 있습니다.
방법 1 HTML 태그에 직접 지정합니다. 가장 일반적으로 사용되는 방법입니다. 방법은

코드 복사 코드는 다음과 같습니다.

예를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

태그의 이 정의는 문서를 읽을 때 " 웹 페이지 읽기 "완료, 천천히 즐겨주세요", 사용자가 문서를 종료하거나 창을 닫거나 다른 페이지로 이동하면 "안녕하세요"가 팝업됩니다.
방법 2: 특정 개체의 특정 이벤트에 대한 JavaScript를 작성합니다. 이 방법은 거의 사용되지 않지만 일부 상황에서는 여전히 유용합니다. 방법은

코드 복사 코드는 다음과 같습니다.

...
(이벤트 핸들러 코드)
...

코드 복사 코드는 다음과 같습니다.

functionignoreError() {
return true;
}
window.onerror =ignoreError;


적용 대상: window 객체
onfocus 이벤트는 창이 포커스를 받을 때 발생합니다. 적용 대상: window 객체
onload 이벤트는 모든 문서가 다운로드될 때 발생합니다. 모든 다운로드가 완료되었습니다. 이는 HTML 파일뿐만 아니라 포함된 모든 이미지, 플러그인, 컨트롤, 애플릿 등도 다운로드되었음을 의미합니다. 이 이벤트는 윈도우 이벤트이지만 HTML에서 이벤트 핸들러를 지정할 때 적용 대상: window 객체
onmousedown 이벤트는 사용자가 객체 위에 마우스를 놓고 마우스 버튼을 누를 때 발생합니다. onmouseup 이벤트를 참조하세요. 적용 대상: 버튼 객체, 링크 객체
onmouseout 이벤트는 마우스가 객체를 떠날 때 발생합니다. onmouseover 이벤트를 참조하세요. 적용 대상: 링크 개체
onmouseover 이벤트는 마우스가 개체 범위에 들어갈 때 발생합니다. 이 이벤트와 onmouseout 이벤트는 이미지 미리 읽기와 결합되어 마우스가 이미지 연결 위로 이동할 때 이미지가 변경되는 효과를 얻을 수 있습니다. 때때로 연결을 가리킬 때 상태 표시줄에 주소가 표시되지 않지만 다른 정보가 표시되는 것을 볼 수 있습니다. 이러한 정보는 언제든지 변경될 수 있는 것 같습니다.

적용 대상: 링크 개체
onmouseup 이벤트는 사용자가 개체 위에 마우스를 놓고 마우스 버튼을 누른 후 마우스 버튼을 놓으면 발생합니다. 마우스를 놓은 개체 위에 마우스가 있지 않은 상태에서 마우스 버튼을 누르면 이 이벤트가 발생하지 않습니다. 적용 대상: 버튼 객체, 링크 객체
onreset 이벤트는 양식의 "재설정" 버튼을 클릭할 때(눌렸다가 놓을 때) 발생합니다. 이벤트 핸들러에서 false를 반환하면 양식이 재설정되는 것을 방지할 수 있습니다. 적용 대상: 양식 개체
onresize 이벤트는 창 크기가 조정될 때 발생합니다. 적용 대상: 창 개체
onsubmit 이벤트는 양식의 "제출" 버튼을 클릭할 때(누르고 놓을 때) 발생합니다. 이 이벤트를 사용하여 양식의 유효성을 확인할 수 있습니다. 이벤트 핸들러에서 false를 반환하면 양식 제출을 방지할 수 있습니다. 적용 대상: 양식 개체
onunload 이벤트는 사용자가 문서를 종료할 때(또는 창을 닫거나 다른 페이지로 이동할 때) 발생합니다. onload와 마찬가지로 HTML로 작성하고 싶다면 태그에 작성하세요. 일부 웹 마스터는 방문자가 링크를 클릭하도록 유도하기 위해 일부 팝업 광고 창을 작성하도록 "설문조사 양식"을 표시하는 데 이 방법을 사용합니다. 저는 이 "onunload="open..."" 방법이 매우 나쁘다고 생각합니다. 때로는 너무 많은 창이 팝업되어 리소스 부족을 초래하기도 합니다. 방문객들에게 하고 싶은 말이 있다면 웹페이지에 올려야겠죠? 적용 대상: 창 개체