크로스 브라우저 이벤트 개체_자바스크립트 기술 소개

코드 복사 코드는 다음과 같습니다.

var eventUtil = {
getEvent : function(event ){
이벤트 : window.event
};
getTarget : function(event){
return event.target
}; PreventDefault : 함수(이벤트){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue =
}
};
stopPropagation : function(event){
if(event.stopPropagation){
event.stopPropagation()
}else{
event.cancelBubble =
}
};
};

DOM 호환 브라우저를 사용하면 이벤트 변수가 전달되고 IE에서는 이벤트 매개변수가 정의되지 않으므로 window.event가 반환됩니다. 이므로 eventUtil.getEvent() 메소드를 사용하여 DOM 또는 IE에서 이벤트 반환 값을 사용할 수 있습니다.
두 번째 메소드와 마찬가지로 getTarge() 메소드는 먼저 이벤트 객체의 target 속성을 감지하고, IE 브라우저인 경우 srcElement 속성을 반환합니다. 호환성이 보장됩니다.

코드 복사 코드는 다음과 같습니다.

btn.onclick = function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
};

세 번째 메소드인 PreventDefault() 메소드는 이벤트 객체가 전달되었습니다. 진입 시 먼저 이벤트 객체의 PreventDefault() 메서드가 사용 가능한지 확인하고, 사용 가능한 경우에는 PreventDefault 메서드를 호출하여 해당 이벤트의 returnValue를 false로 설정합니다.
예:
.getElementById("myLink");
link.onclick = function(event){
event = EventUtil.getEvent(event)

EventUtil.preventDefault(event) ; }; 이 코드는 링크 태그의 기본 동작을 방지합니다. 이벤트 개체는 EventUtil의 getEvent 메서드의 반환 값에서 나오며 PreventDefault의 수신 매개변수로 사용됩니다. () 방법. 네 번째 메소드인 stopPropagation()은 동일한 메소드를 사용하며 먼저 DOM 메소드를 시도한 후 다음 코드와 같이 cancelBubble 속성을 시도합니다.

코드 복사


코드는 다음과 같습니다.

var btn = document.getElementById("myBtn")
btn.onclick = function(event){
alert("클릭됨");

event = EventUtil.getEvent(event); EventUtil.stopPropagation(event) document.body.onclick = function(event) { alert(" Body clicked") };

이 방법은 브라우저의 버블링 단계 또는 브라우저의 버블링 및 캡처 단계에서 이벤트를 차단할 수 있다는 점을 기억하세요.