JavaScript 이벤트 모델 예제 분석_javascript 기술

이 기사의 예에서는 JavaScript 이벤트 모델의 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

1. 이벤트 모델

버블링 이벤트: 이벤트는 리프 노드에서 상위 노드를 따라 루트 노드로 전파됩니다.
이벤트 캡처: 버블링 이벤트와 달리 DOM 트리의 최상위 요소에서 가장 정확한 요소까지
DOM 표준 이벤트 모델: DOM 표준은 버블링 이벤트와 캡처 이벤트를 모두 지원하며, 먼저 캡처 유형과 버블링 전달을 결합한 것이라고 할 수 있습니다.

2. 이벤트 객체

IE 브라우저에서 이벤트 객체는 window의 속성입니다. DOM 표준에서는 이벤트를 이벤트 처리 함수의 유일한 매개변수로 전달해야 합니다.

호환 가능한 이벤트 객체 가져오기:

function(event){ 
  //event 是作为DOM标准的参数传入处理函数 
 event = event ?event : window.event; 
} 

IE에서는 이벤트의 객체가 이벤트의 srcElement에 포함되는 반면, DOM 표준에서는 객체가 target 속성에 포함됩니다.
호환 가능한 이벤트 객체가 가리키는 요소를 가져옵니다.

var target =event.srcElement ? event.srcElement : event.target ;

이벤트 객체가 올바르게 획득되었는지 확인하는 것이 전제입니다

3. 이벤트 리스너

IE에서는 등록된 리스너가 역순으로 실행됩니다. 즉, 나중에 등록된 리스너가 먼저 실행됩니다

element.attachEvent('onclick',observer); //注册监听器
element.detachEvent('onclick',observer) //移除监听器

첫 번째 매개변수는 이벤트 이름, 두 번째 매개변수는 콜백 핸들러 함수

DOM 표준에서:

element.addEventListener('click',observer,useCapture) 
element.removeEventListener('click',observer,useCapture)

첫 번째 매개변수는 "on" 접두사가 없는 이벤트 이름이고, 두 번째 매개변수는 콜백 처리 함수이며, 세 번째 매개변수는 콜백 함수가 캡처 단계에서 호출되는지 아니면 버블링 단계에서 호출되는지를 나타냅니다. 기본값은 true입니다.

캡처 단계에서

4. 이벤트 전달

브라우저 이벤트 전달 호환 취소

function someHandler(event){ 
  event = event || window.event; 
  if(event.stopPropagation) //DOM标准 
  event.stopPropagation(); 
  else 
  event.cancelBubble = true; //IE标准 
} 

이벤트 배송 취소 후 기본 처리

function someHandler(event){ 
  event = event || window.event; 
  if(event.preventDefault) //DOM标准 
  event. preventDefault (); 
  else 
  event.returnValue = true; //IE标准 
}

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.