JavaScript 이벤트 모델, 개체, 모니터링 및 전달 코드 예제에 대한 자세한 설명

1. 이벤트 모델

버블링 이벤트(Bubbling): 이벤트는 상위 노드를 따라 리프 노드에서 루트 노드까지 전달됩니다.
이벤트 캡처(Capturing): DOM 트리의 최상위 요소에서 가장 정확한 요소로 , 버블링 이벤트와는 반대로
DOM 표준 이벤트 모델: DOM 표준은 버블링 이벤트와 캡처 이벤트를 모두 지원합니다. 먼저 캡처 유형과 버블링 전달

II, 이벤트를 결합한 것이라고 할 수 있습니다. object

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

호환되는 이벤트 개체를 얻으려면:

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

IE에서는 이벤트 객체가 이벤트의 srcElement에 포함되어 있는 반면, DOM 표준에서는 객체가 target 속성에 포함되어 있습니다.
호환되는 이벤트 객체가 가리키는 요소를 얻습니다:

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

전제는 이벤트 객체가 올바른지 확인하는 것입니다. Obtain

3. 이벤트 리스너

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

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

The 첫 번째 매개변수는 이벤트 이름이고, 두 번째 매개변수는 콜백 처리 함수입니다

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 이벤트 모델, 개체, 모니터링 및 전달 코드 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!