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