이 기사에서는 JavaScript 이벤트 모델의 사용에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
1. 이벤트 모델
버블 링 : 이벤트는 조상 노드를 따라 잎 노드에서 루트 노드로 위쪽으로 전달됩니다.
캡처 : 돔 트리의 상단 요소에서 버블 이벤트와 반대되는 가장 정확한 요소까지
DOM 표준 이벤트 모델 : DOM 표준은 버블 타입 이벤트와 캡처 유형 이벤트를 모두 지원합니다. 우선, 두 가지, 캡처 유형 및 기포 형 전송의 조합이라고 할 수 있습니다.
2. 이벤트 객체
IE 브라우저에서 이벤트 객체는 창의 속성입니다. DOM 표준에서는 이벤트를 고유 한 매개 변수로 이벤트 처리 기능으로 전달해야합니다.
호환 이벤트 개체를 얻으십시오.
function (event) {// event는 DOM 표준 이벤트 = 이벤트의 매개 변수로 전달되는 처리 함수입니다. 이벤트 : window.event; }즉, 이벤트의 객체는 이벤트의 srcelement에 포함되어 있으며 DOM 표준에는 대상 속성에 포함되어 있습니다.
호환 가능한 이벤트 개체에 의해 지적 된 요소를 얻으십시오.
var target = event.srcelement? event.srcelement : event.target;
전제는 이벤트 개체가 올바르게 얻어 졌는지 확인하는 것입니다.
3. 이벤트 리스너
즉, 등록 된 청취자는 역순으로 실행됩니다. 즉, 등록 된 청취자가 먼저 실행됩니다.
요소 .attachevent ( 'onclick', 옵저버); // Register Listener Element.DetacheVent ( 'Onclick', Observer) // 리스너를 제거합니다
첫 번째 매개 변수는 이벤트 이름이고 두 번째 매개 변수는 콜백 처리 함수입니다.
DOM 표준에 따라 :
element.addeventListener ( 'Click', Observer, UseCapture) element.removeEventListener ( 'Click', Observer, UseCapture)
첫 번째 매개 변수는 "on"의 접두사가없는 이벤트 이름이며, 두 번째 매개 변수는 콜백 처리 함수이며, 세 번째 매개 변수는 콜백 함수가 캡처 스테이지 또는 버블 스테이지에서 호출되는지 여부를 나타냅니다. 기본값은 캡처 스테이지입니다
4. 이벤트 배달
브라우저 호환 브라우저에서 이벤트 전달을 취소하십시오
기능 somehandler (이벤트) {event = event || Window.event; if (event.stopPropagation) // dom 표준 event.stopPropagation (); else event.cancelbubble = true; // 즉 표준}이벤트 전달 후 기본 처리를 취소하십시오
기능 somehandler (이벤트) {event = event || Window.event; if (event.preventDefault) // dom 표준 이벤트. 예방 대상 (); else event.returnValue = true; // 즉 표준}이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.