JavaScript_Basic 지식으로 이벤트 처리

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


예를 살펴보겠습니다.

태그의 이러한 정의를 사용하면 문서에서 다음을 수행할 수 있습니다. 완료되면 읽으십시오. 사용자가 문서를 종료하거나 창을 닫거나 다른 페이지로 이동하면 "안녕하세요"라는 대화 상자가 나타납니다.
방법 2: 특정 개체의 특정 이벤트에 대한 JavaScript를 작성합니다. 이 방법은 덜 자주 사용되지만 일부 상황에서는 여전히 유용합니다. 방법은





방법 3은 JavaScript로 설명되어 있습니다. 메소드: .
=
; <script> <BR>... <BR>(事件处理程序代码) <BR>... <BR></script><script> <BR> alert('网页读取完成，请慢慢欣赏！'); <BR></script>이 메소드에서 주목해야 할 점은 "이벤트 핸들러"가 실제 코드라는 점입니다. 끈. 이벤트 핸들러가 사용자 정의 함수인 경우 매개변수를 사용할 필요가 없으면 "()"를 추가하지 마십시오.
functionignoreError() {
return true;
}
window.onerror =ignoreError; // "()"는 사용되지 않습니다.

이 예제는ignoreError() 함수를 정의합니다. as 창 객체의 onerror 이벤트에 대한 핸들러입니다. 그 효과는 창 개체 아래의 모든 오류를 무시하는 것입니다(접근을 허용하지 않는 위치 개체를 참조하여 발생하는 "권한 없음" 오류는 무시할 수 없음).

이벤트 내용



onblur 이벤트는 창이 포커스를 잃었을 때 발생합니다. 적용 대상: 윈도우 객체

onchange 이벤트는 텍스트 입력 영역의 내용이 변경된 후 텍스트 입력 영역에서 포커스가 이동한 후 발생합니다. 이 이벤트를 포착하는 것은 주로 입력의 유효성을 실시간으로 감지하거나 문서 내용을 즉시 변경하는 데 사용됩니다. 적용 대상: 비밀번호 객체, 텍스트 객체, 텍스트 영역 객체

객체를 클릭하면 클릭 이벤트가 발생합니다. 클릭이란 개체 위에 마우스를 놓고 마우스 버튼을 누른 다음 마우스를 움직이지 않고 마우스 버튼을 놓는 전체 프로세스를 말합니다. 일반 버튼 객체(Button)에는 일반적으로 onclick 이벤트 핸들러가 있습니다. 왜냐하면 이러한 종류의 객체는 사용자로부터 어떤 정보도 얻을 수 없고 onclick 이벤트 핸들러 없이는 쓸모가 없기 때문입니다. onclick 이벤트 핸들러를 버튼에 추가하면 이벤트 핸들러에서 작업, 대상, 인코딩 및 메서드와 같은 양식의 하나 이상의 속성을 변경한 다음 양식의 submit() 메서드를 호출하여 "다른 제출 버튼"을 시뮬레이션할 수 있습니다. Link 객체의 onclick 이벤트 핸들러에서 false를 반환하면 브라우저가 이 연결을 열 수 없습니다. 즉, Go!와 같은 링크가 있으면 사용자가 어떻게 클릭하든 www.a.com 웹사이트로 이동하지 않습니다. 단, 사용자가 브라우저에서 JavaScript 실행을 금지하지 않는 한은 그렇지 않습니다. . 적용 대상: 버튼 개체, 이미지 개체, 라디오 개체, 제출 개체

오류가 발생하면 발생합니다. 해당 이벤트 핸들러는 일반적으로 "오류 핸들러"라고 불리며 오류를 처리하는 데 사용됩니다. 위에서 언급한 대로 모든 오류를 무시하려면 다음을 사용하세요.
functionignoreError() {
return true
}
window.onerror =ignoreError;

적용 대상: window 객체

창에 포커스가 있을 때 onfocus 이벤트가 발생합니다. 적용 대상: 창 개체

모든 문서가 다운로드되면 onload 이벤트가 발생합니다. 모든 다운로드가 완료되면 HTML 파일뿐만 아니라 포함된 모든 이미지, 플러그인, 컨트롤, 애플릿 등도 다운로드되었음을 의미합니다. 이 이벤트는 윈도우 이벤트인데, HTML에서 이벤트 핸들러를 지정할 때 태그에 작성합니다. 적용 대상: 창 객체

onmousedown 이벤트는 사용자가 객체 위에 마우스를 놓고 마우스 버튼을 누를 때 발생합니다. onmouseup 이벤트를 참조하세요. 적용 대상: 버튼 객체, 링크 객체

마우스가 객체를 떠날 때 onmouseout 이벤트가 발생합니다. onmouseover 이벤트를 참조하세요. 적용 대상: 링크 개체

onmouseover 이벤트는 마우스가 개체 범위에 들어갈 때 발생합니다. 이 이벤트와 onmouseout 이벤트를 이미지 미리 읽기와 결합하면 이미지 연결 위로 마우스를 이동할 때 이미지가 변경되는 효과를 얻을 수 있습니다. 때때로 연결을 가리킬 때 상태 표시줄에 주소가 표시되지 않지만 다른 정보가 표시되는 것을 볼 수 있습니다. 이러한 정보는 언제든지 변경될 수 있는 것 같습니다.


적용 대상: 링크 개체

onmouseup 이벤트는 사용자가 개체 위에 마우스를 놓고 마우스 버튼을 눌렀을 때 발생합니다. 마우스 버튼을 놓습니다. 마우스를 놓은 개체 위에 마우스가 있지 않은 상태에서 마우스 버튼을 누르면 이 이벤트가 발생하지 않습니다. 적용 대상: 버튼 객체, 링크 객체

onreset 이벤트는 양식의 "재설정" 버튼을 클릭할 때(눌렀다가 놓을 때) 발생합니다. 이벤트 핸들러에서 false를 반환하면 양식 재설정을 방지할 수 있습니다. 적용 대상: 양식 개체

창 크기가 조정될 때 onresize 이벤트가 발생합니다. 적용 대상: 창 개체

onsubmit 이벤트는 양식의 "제출" 버튼을 클릭할 때(누르고 놓을 때) 발생합니다. 이 이벤트를 사용하여 양식의 유효성을 확인할 수 있습니다. 이벤트 핸들러에서 false를 반환하면 양식 제출을 방지할 수 있습니다.적용 대상: 양식 개체

onunload 이벤트는 사용자가 문서를 종료할 때(또는 창을 닫거나 다른 페이지로 이동할 때) 발생합니다. onload와 마찬가지로 HTML로 작성하고 싶다면 태그에 작성하시면 됩니다. 일부 웹 마스터는 방문자가 링크를 클릭하도록 유도하기 위해 "설문조사 양식"을 팝업으로 표시하여 방문자가 작성하도록 "강제"하는 데 이 방법을 사용합니다. 저는 이 "onunload="open..."" 방법이 매우 나쁘다고 생각합니다. 때로는 너무 많은 창이 팝업되어 리소스 부족을 초래하기도 합니다. 방문객들에게 하고 싶은 말이 있다면 웹페이지에 올려야겠죠? 적용 대상: 창 객체