jQuery 학습 4 브라우저 이벤트 Model_jquery-JS 튜토리얼-php.cn

jQuery 학습 4 브라우저 이벤트 Model_jquery

WBOY

풀어 주다： 2016-05-16 18:35:19

원래의

1219명이 탐색했습니다.

먼저 DOM의 2레벨 모드를 알아야 합니다: DOM0 레벨과 DOM2 레벨

DOM0 레벨에서는 DOM 요소의 속성에 함수 인스턴스의 참조를 할당하여 이벤트 핸들러가 선언됩니다.

DOM 레벨 0 이벤트 핸들러 선언

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

;html>

DOM 레벨 0 이벤트 예

>

이벤트 버블링: 대상 요소가 이벤트를 처리할 기회를 얻은 후 이벤트 모델은 대상 요소의 상위 요소를 검사하여 동일한 유형의 이벤트에 대해 핸들러가 설정되었는지 확인합니다. 그렇다면 상위 요소의 핸들러도 호출됩니다. 그런 다음 DOM 트리의 상단이 확인될 때까지 상위 요소를 확인합니다. 이 프로세스를 이벤트 버블링이라고 합니다.

DOM 트리 시작점부터 이벤트 전파

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

DOM 레벨 0 버블링 예 " src="../scripts /jquery-1.2.1.js">

;div id="grandpa"> ;

;

🎜>
DOM 2nd DOM 레벨 0 모델의 레벨 0의 단점은 속성이 이벤트 핸들러인 함수에 대한 참조를 저장하는 데 사용되므로 각 요소는 특정 이벤트 유형에 대해 한 번에 하나의 이벤트 핸들러만 등록할 수 있다는 것입니다. .

DOM 레벨 2 이벤트 모델(리스너라고도 함)은 이러한 유형의 문제를 해결하도록 설계되었습니다. 각 DOM 요소는 이벤트 핸들러(리스너)를 요소에 연결하는 데 사용되는 addEventListener()라는 메서드를 정의합니다. 이 메소드의 형식은 다음과 같습니다.

addEventListener(enentType,listener,useCapture)

매개변수 eventType은 처리할 시간 유형을 식별하는 데 사용되는 문자열입니다. 예: 클릭, 마우스오버, 키다운 등

listener 매개변수는 요소에 지정된 유형의 핸들러를 설정하는 데 사용되는 함수(또는 인라인 함수)에 대한 참조입니다.

useCapture 매개변수는 부울 유형입니다.

DOM 레벨 2 모델을 사용하여 이벤트 핸들러 생성

코드 복사

코드는 다음과 같습니다.

<머리>
DOM 레벨 2 이벤트 예

<본문>

以上代码简单说明我们能는 같은 일个元素上为同一个事件类型建立多个事件处理程序