자바스크립트 이벤트 모델이 무엇인가요?

다양한 브라우저에는 원본 이벤트 모델, DOM2 이벤트 모델, IE 이벤트 모델의 세 가지 이벤트 모델이 있습니다. 원래 이벤트 모델은 모든 브라우저에서 지원됩니다. DOM2에 정의된 이벤트 모델은 현재 IE를 제외한 모든 주요 브라우저에서 지원됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

1. 원본 이벤트 모델

이벤트 유형: "입력 이벤트(예: onclicki)"와 "의미 이벤트(예: onsubmit)"로 구분됩니다.

이벤트 프로그램 등록은 다음과 같은 방법으로 수행할 수 있습니다. :

1. HTML 속성 값인 JS 코드

<input type="button" value="Press me" onclick="alert(&#39;thanks&#39;);"

2. JS 속성인 이벤트 핸들러

참고: 문서의 각 HTML 요소에는 문서 트리에 해당 JS 개체가 있으며 이 JS 개체의 속성은 다음과 같습니다. 해당 HTML 요소 속성은 HTML 특성의 JS 코드이든 JS 속성의 타임 핸들러이든 관계없이 자체 속성은 함수 "함수"입니다.

<form name="f1">

<input name="b1" type="button" value="Press Me"/>

</form>

첫 번째 할당 방법:

document.f1.b1.onclick=function(){alert('thanks');};

두 번째 할당 방법:

function plead(){window.status="Please Press Me!";}

document.f1.bi.onmouseover=plead;

JS 속성인 이벤트 핸들러는 JS 속성을 사용하여 명시적으로 호출할 수 있습니다.

document.myfrom.onsubmit();

이벤트 핸들러는 false를 반환하여 브라우저가 이벤트의 기본 작업, 즉 onsubmit과 같이 일반적으로 사용되는 작업을 실행하지 못하도록 할 수 있습니다. 예외는 true를 반환하는 하이퍼링크 마우스오버의 window.status 표시 이벤트 차단입니다. 예:

<a href="help.htm" onmouseover="window.status=&#39;help&#39;;return true;">help</a>

2. DOM2 이벤트 모델

이 모델은 IE의 버블 모델을 참조하여 공식화되었습니다. w3c 사양에 따르면 원래 모델에서는 이벤트가 발생하면 이벤트 핸들러가 직접 호출되며 다른 이벤트 전파 프로세스가 없습니다. DOM2 모델에서는 이벤트가 세 단계로 구분되는 특별한 전파 프로세스를 갖습니다.
(1) 캡처 단계: 이벤트는 문서에서 대상 요소까지 전파됩니다. 이 과정에서 상위 요소가 이벤트에 관심이 있으면 자체 처리 기능을 등록할 수 있습니다. 대상 단계: 이벤트가 대상 요소에 도달하고 대상 요소 이벤트 처리 기능을 실행합니다.

(3) 버블링 단계: 이벤트는 문서에 도달할 때까지 대상 요소에서 발생합니다. 그러나 모든 이벤트 유형은 캡처 단계를 거칩니다. , 일부 이벤트만 버블링 단계를 거치게 됩니다. 예를 들어 제출 이벤트는 작동되지 않습니다.

전체 이벤트 전파 프로세스 중에 event.stopPropagation()을 호출하여 이벤트 전파를 중지할 수 있습니다. 브라우저의 기본 동작을 방지합니다.

addEventListener("eventType","handler","true!false");

removeEventListner("eventType","handler","true!false");

셋, IE 모델

IE 모델도 제공됩니다. 이벤트 객체는 이벤트의 세부 사항을 캡슐화하지만 IE는 이벤트 처리 기능에만 객체를 전달하지 않습니다. IE는 이를 전역 개체 창의 속성으로 사용합니다. IE의 이벤트 전파 모드는 DOM2의 두 번째 및 세 번째 단계에 해당하며 먼저 대상 요소의 처리 기능을 실행한 다음 상위로 전파됩니다. IE에서는 마우스 이벤트만 캡쳐가 가능하지만, DOM2에서는 모든 이벤트를 캡쳐할 수 있습니다. IE에서는 이벤트 등록 및 삭제 기능도 DOM2와 다릅니다. 요소의 attachmentEvent("eventType","handler") 및 detachEvent("eventType","handler")를 통해 dom2와의 차이점은 eventType이 접두사Features:

1에 있다는 점입니다. . 버블 인터럽트 방법:

window.ecent.cancelBubble=true;

2. 이벤트 개체는 이벤트 핸들러의 함수 매개변수가 아니라 창의 전역 변수입니다.

3. 이벤트 등록 기능: attachmentEvent() 및 등록 취소: detachEvent().

4. Netscape4 이벤트 모델

Netscape는 완전히 개발이 중단된 것 같으니 간단히 설명하지는 않겠습니다. : 거품이 나지 않고 캡쳐만 됩니다.

【추천 학습: javascript 고급 튜토리얼】

위 내용은 자바스크립트 이벤트 모델이 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!