집 > 기사 > 웹 프론트엔드 > JavaScript 이벤트 모델 소개(그래픽 튜토리얼)

JavaScript 이벤트 모델 소개(그래픽 튜토리얼)

亚连원래의: 2018-05-21 11:16:051037검색

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

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(&#39;thanks&#39;);};

두 번째 할당 방법:

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 이벤트 모델

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

(2) 대상 단계. : 이벤트가 대상 요소에 도달하여 대상 요소 이벤트 처리 기능을 실행합니다.

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

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

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

Three, 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 이벤트 모델 소개(그래픽 튜토리얼)

관련 기사