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

伊谢尔伦
풀어 주다: 2017-07-22 17:18:09
원래의
1585명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!