자바스크립트 이벤트 취소 및 버블링 방지에 대한 간략한 논의

기본 작업 취소

w3c 메서드는 e.preventDefault()이고, IE는 e.returnValue = false를 사용합니다.

addEventListener()를 지원합니다. 브라우저에서는 시간 객체의 PreventDefault() 메서드를 호출하여 시간의 기본 작업을 취소할 수도 있습니다. 하지만 IE9 이전의 IE에서는 이벤트 객체의 returnValue 속성을 false로 설정하면 동일한 효과를 얻을 수 있습니다. 다음 코드에서는 세 가지 취소 기술을 모두 사용하는 이벤트 핸들러를 가정합니다.

function cancelHandler(event){
  var event = event || window.event;  //用于IE
  if(event.preventDefault) event.preventDefault();  //标准技术
  if(event.returnValue) event.returnValue = false;  //IE
  return false;   //用于处理使用对象属性注册的处理程序
}

현재 초안 DOM 이벤트 모델은 Event 객체 속성 defaultPrevented를 정의합니다.

return false

javascript의 false 반환은 기본 동작만 방지하지만 jQuery를 사용하면 기본 동작과 객체 버블링을 모두 방지할 수 있습니다.

코드는 다음과 같습니다.

var a = document.getElementById("testB");
　　a.onclick = function(){
　　return false;
};

버블링을 방지하기 위한

w3c의 방법은 e. stopPropagation(), IE는 e.cancelBubble = true

addEventListener()를 지원하는 브라우저에서 이벤트 객체의 stopPropagation() 메서드를 호출하여 이벤트가 계속 전파되는 것을 방지할 수 있습니다. 동일한 객체에 다른 핸들러가 정의된 경우 나머지 핸들러는 계속 호출되지만 이벤트 전파 중 언제든지 stopPropagation() 메서드를 호출할 수 있습니다. 이는 캡처 단계, 이벤트 대상 자체 및 이벤트에서 작동할 수 있습니다. 위험 버블 단계.

IE9 이전의 IE에서는 stopPropagation() 메서드를 지원하지 않습니다. 반면, IE 이벤트 객체에는 cancleBubble 속성이 있습니다. 이 속성을 true로 설정하면 이벤트가 더 이상 전파되지 않습니다. (IE8 및 이전 버전은 이벤트 전파의 캡처 단계를 지원하지 않으므로 버블링만 취소할 이벤트 전파입니다.)

현재 DOM 이벤트 사양 초안은 stopImmediatePropagation이라는 Event 개체에 대한 또 다른 메서드를 정의합니다. ). stopPropagation()과 마찬가지로 이 메서드는 다른 객체로부터의 이벤트 전파를 방지할 뿐만 아니라 동일한 객체에 등록된 다른 이벤트 핸들러가 호출되는 것도 방지합니다.

function stopHandler(event)
    window.event?window.event.cancelBubble=true:event.stopPropagation();
}

위 내용은 이 글의 전체 내용입니다. 당신이 좋아할 수 있기를 바랍니다.

더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼