오늘의 장에서 시작하여 Kitjs의 이벤트 관리의 내용을 소개하는 데 중점을두고 주류 JS 프레임 워크가 내부적으로 자체 독립적 인 이벤트 관리 기능을 구현하는 방법을 간단한 언어로 노출하려고 노력할 것입니다.
(i) 일반적인 DOM 이벤트
우리는 일반적으로 지원을 통해 HTML에서 이벤트를 작성할 수 있습니다
<a onclick =”alert (1)”> 테스트 </a>
또는 DOM 객체를 얻은 후 바인딩하십시오
document.getElementById ( 'a'). onclick = function () {alert (1)}
또는 보조 사건
document.getElementById ( 'a'). addeventListener ( 'click', function () {alert (1)}, flase)
또는 스크립트 태그를 통해
<script for =”a”event =”onclick”> alert (1) </script>
W3C 표준은 HTML 및 JS의 강력한 의존성을 분리 할 목적으로 2 차 이벤트 방법 인 위의 세 번째 바인딩 방법을 권장합니다.
(ii) 질문
그러나 Mode 3 만 사용하여 JS 프로그래밍을 직접 수행하는 경우 다음과 같은 문제가 발생하기 때문에 충분하지 않습니다.
1. 브라우저 호환성. IE 시리즈 및 W3C에서 지원하는 브라우저의 매개 변수는 두 번째 레벨 이벤트 바인딩 메소드 이름 및 매개 변수에 대해 일관되지 않습니다.
2. 레벨 2 이벤트를 통해 바인딩 한 후, 다른 사람들이 동일한 요소에 이벤트가 있는지 여부를 알 수 없습니다.
3. 레벨 2 이벤트의 바인딩 방법이 트리거 된 후, 순서는 바인딩 전에 순서대로 진행되지 않지만 무작위로 실행됩니다. 그러나 때로는 트리거 된 방법을 주문해야합니다.
4. 동일한 요소의 이벤트가 트리거되면 W3C의 표준 API는 동일한 요소에 바인딩 된 다른 이벤트를 중지하고 계속 트리거하는 지원을 지원하지 않으며 W3C는 기포를 중지하는 것을지지합니다.
5. 여러 번, 익명 함수 메소드를 통해 레벨 2 이벤트를 등록하고 이벤트 실행 방법을 등록 할 핸들이 남아 있으므로 removeEventListener를 통해 이벤트를 취소하기가 어렵습니다.
(iii) 키트 문제를 해결하는 방법
자, JS 프레임 워크는 위의 문제를 해결하기 위해 존재합니다. 키트가 위의 문제를 어떻게 처리하는지 봅시다.
kit.js api에는 ev (config) 메소드가 있습니다.
이 메소드는 4 개의 중요한 매개 변수를 포함하는 맵 유형 객체를 허용합니다.
묶어야하는 el 요소
문자열 이벤트 유형
FN은 실행 방법을 트리거합니다
이 포인터를 지정 해야하는지 여부에 관계없이 범위를 생략 할 수 있습니다. 등록시 EL은이 포인터로 전달됩니다.
(iv) 코드 분석
코드 구현을 더 살펴 보겠습니다
핵심 부분에서 직접 시작하십시오
들어오는 매개 변수가 비어 있지 않은 경우, kitjs evreg의 이벤트 등록을 저장하기 위해 들어오는 매개 변수에 객체가 생성됩니다.
Evreg 개체에는 두 개의 자식 객체가 있습니다. 하나는 evregev라고하며 등록 된 이벤트를 저장합니다.
Evregev 객체에서 키를 현재 등록 된 이벤트로 저장하면 값은 배열입니다. 배열에서 메소드 eV에 전달 된 구성 매개 변수를 먼저 순서대로두고 도착하십시오. 이것은 배열입니다! ! ! 배열은 주문을 저장할 수 있으므로 이것은 매우 중요합니다
Evregfn이라는 익명의 방법도있어 이벤트 트리거를 저장합니다.
우리는 Evregfn이 익명의 사건임을 알 수 있습니다. 처음에는 글로벌 변수 창 [me.constants.kit_event_stopimmediatepropagation]이 == true인지 여부를 결정합니다. 사실이라면 돌아 오면 계속 실행되지 않습니다.
그런 다음 내려다 보면 이벤트에 의해 트리거 된 EV 객체를 받아들이고 대상, CurrentTarget, 관련 타겟과 같은 MERGEIF를 사용하여 많은 객체를 EV에 첨부하여 브라우저 호환성 문제를 해결합니다.
StopNow, StopDefault, Stopgoon은 이벤트가 계속 트리거되는 것을 방지하기 위해 생성 된 방법입니다.
다음 단락은 Evregfn의 열쇠입니다. 이전에 생성 된 EVREGEV의 이벤트 배열을 반복하고 이전 EV 메소드에서 전달 된 구성 매개 변수를 순서대로 가져오고 구성 매개 변수에서 메소드를 실행합니다. 메소드의 반환 값이 비어 있지 않으면 반환 값을 반환합니다.
마지막으로, 우리는 브라우저 호환을 만들고 레벨 2 이벤트 방법을 사용하여 Evregfn 익명 방법을 바인딩합니다.
(v) 요약
간단히 말해, 키트는 자체 익명 방법을 사용하여 이벤트 등록 핸들을 캐시하고 배열을 입력하여 일련의 이벤트를 기억하고 이전에 등록 된 이벤트, 매개 변수, 메소드 등을 찾을 수있는 항목을 제공하며 동시에 브라우저 호환성과 호환됩니다.
(vi) 로그 아웃 이벤트
키트 도움말 캐시 이벤트 핸들을 사용하면 로그 아웃이 간단 해집니다.
키트가 직접 비교 또는 fn.toString 비교를 통해 해당 이벤트 구성을 찾을 수 있음을 알 수 있습니다.
(vii) 이벤트 향상
키트가 시스템 이벤트 객체에서 Mergeif 작업을 수행했음을 알았을 것입니다. 우선, 왜 Megerif를해야합니까? 시스템 이벤트 객체의 객체 속성이 준비되어 있고 덮어 쓰지 않기 때문에 가지고 있지 않은 속성 만 추가 할 수 있습니다.
따라서 키트는 Megerif 만 할 수 있습니다. 우리는 모두 각 브라우저의 이벤트 객체의 이벤트 객체와 비 호환성이 있다는 것을 알고 있으므로 키트는 이러한 비 호환성을 수정해야합니다. 예를 들어, IE에는 대상 속성이없고 srcelement 만 있습니다. W3C 표준의 호환성을 달성하기 위해 대상 속성을 추가 할 수 있습니다.
물론 수리 만 우리의 요구를 충족시킬 수 없습니다. 여러 번, 우리는 여전히 이벤트 객체에 대해 약간의 체중 증가를 만들어야합니다.
예를 들어, iPhone에서 터치 다운 및 터치 모브를 개발할 때는 종종 단일 손가락 오프셋을 가져 와서 단일 손가락 오프셋 인 EV.TargetTouches [0] .ClientX, 그러한 코드이지만 익명의 함수가 이와 같으면 PC에서 호환되지 않습니다.
무엇을해야합니까? 문제가되지 않습니다. 이벤트 객체를 우리 자신의 속성을 병합시킬 수 있습니다.
FirstFingerClientX 등은 모바일 및 PC에서 개발 한 통합 코드를 쉽게 구현할 수 있도록합니다.
다음 기사는 HTML5 드래그 앤 드롭에 대해 이야기 할 것이며 고급 제스처 이벤트는이 기준을 기반으로합니다.
이것에 추가하면, Extjs와 같은 새로운 이벤트가 아닌 이유는 무엇입니까?
1. 시스템 네이티브 객체는 특정 상속 관계를 가지며 파괴되기를 원하지 않습니다.
2. 자신의 새 개체를 사용하는 경우 프레임 워크를 벗어난 후 코드를 사용할 수 없을 수 있으며 코드 컨텐츠를 다시 변경해야합니다.