콜 이벤트:
이벤트 객체
이벤트 객체란 무엇인가요? DOM에서 이벤트가 트리거되면 이벤트 객체 이벤트가 생성됩니다. 예를 들어 마우스를 클릭하면 클릭 유형이 생성되고 해당 요소에서 발생하는
도 생성됩니다.
dom 이벤트 객체의 type 속성은 이벤트 대상을 얻는 데 사용됩니다. stopPropagation() 메서드는 이벤트의 기본 동작을 방지합니다.
IE에서는 이벤트 객체의 type 속성을 사용하여 이벤트 객체를 획득하고, cancelBubble 속성을 사용하여 이벤트 버블링을 방지합니다. 거짓은 차단하지 않음을 의미합니다
returnValue 속성은 이벤트 차단을 위한 기본 동작입니다. false로 설정하면
차단을 의미합니다.
// 다양한 브라우저와 호환 크로스 브라우저 이벤트 처리 ------- 통합 캡슐화
var EventHandle = {
// 요소: 요소, 유형: 클릭 이벤트, 핸들: 실행 방법
//핸들 추가
AddEventHandle: 함수(요소, 유형, 핸들러) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);//---false //버블링 dom2 수준을 나타냅니다
}
else if (element.attachEvent) {
element.attachEvent("on" 유형, 핸들러);
} else {
요소["on" 유형] = 핸들러;
}
},
//핸들 삭제 이벤트 처리가 작동하지 않습니다
RemoveEventHandle: 함수(요소, 유형, 핸들러) {
If (element.removeEventListener) { // 지원 dom2 수준 이벤트 처리 유형은 onclick
element.removeEventListener(type, handler, false) //---false //버블링을 나타냅니다
}
else if (element.detachEvent) {
element.detachEvent("on" 유형, 핸들러) //IE 지원
} else {
요소["on" type] = null;//dom0 수준 이벤트 처리 기존 클릭 이벤트
}
},
//이벤트 객체 가져오기, 브라우저와 호환되는 모든 객체
GetEvent: 함수(이벤트) {
이벤트 반환 이벤트: window.event; // 낮은 버전의 IE 브라우저에서는 Window.event가 필요합니다
},
//이벤트 유형을 가져옵니다. 클릭인가요 마우스 이동인가요
GetType:함수(이벤트){
return event.type;
},
//현재 요소 가져오기
GetElement: 함수(이벤트) {
return event.target ||
},
//이벤트 차단의 기본 동작
: 함수(이벤트) {
If (event.preventDefault) {
event.preventDefault();
}
그 외 {
event.returnValue = false;
}
},
//이벤트 버블링 방지
StopPropagation: 함수(이벤트) {
If (event.stopPropagation) {
event.stopPropagation();
}
그 외 {
event.cancelBubble = true;
}
}
}