event.type 속성, 이벤트 기본 행위 차단

var btn = document.getElementById("btn");
    var handler = function(event){
        switch(event.type){
            case 'click':
            alert("clicked");
            break;
            case "mouseover":
            event.target.style.backgroundColor = "red";
            break;
            case "mouseout":
            event.target.style.backgroundColor = "";
            break;
        }
    };
    btn.onclick = handler;
    btn.onmouseover = handler;
    btn.onmouseout = handler;

여기는 이벤트를 검사합니다.type 속성은 함수가 어떤 사건이 발생했는지 확인하고 해당하는 조작을 할 수 있도록 합니다.
특정 이벤트의 기본 동작을 막으려면preventDefault() 방법을 사용하십시오.예를 들어 링크의 기본 동작은 눌렀을 때 href 특성이 지정한 URL로 되돌아가는 것입니다.링크 내비게이션의 기본 행동을 막고 싶다면, 링크된 onclick 시간 처리 프로그램을 통해 취소할 수 있습니다. 아래의 예와 같습니다.

var link = document.getElementById("myLink");
link.onclick = function(event){
    event.preventDefault();
}

cancelable 속성이true로 설정된 시간만preventDefault () 를 사용하여 기본 동작을 취소할 수 있습니다.
returnValue 속성은 DOM의preventDefault() 방법과 같습니다. 이들의 역할은 주어진 시간을 취소하는 기본 동작입니다.returnValue를false로 설정하면 기본 동작을 막을 수 있습니다.아래의 예를 보아라.

var link = document.getElementById("myLink");
link.onclick = function(){
      window.event.returnValue = false;
}

이 예는 원클릭 이벤트 처리 프로그램에서returnValue를 사용하여 링크의 기본 행위를 막는 목적을 달성했습니다.DOM과 달리 여기서 이벤트가 취소될 수 있는지 확인할 방법이 없습니다.
또한stopPropagation() 방법은 DOM 차원에서의 시간 전파를 즉시 멈추는 데 사용되며, 즉 진일보한 시간의 포획이나 거품을 없애는 데 사용된다.예를 들어 단추에 직접 추가된 이벤트 프로세서는stopPropagation () 을 호출하여document에 등록하는 것을 피할 수 있습니다.body 위의 이벤트 처리 프로그램은 아래의 예와 같다.

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
      alert("Clicked");
      event.stopPropagation();
}
document.body.onclick = function(event){
      alert("Body Clicked");
}

이 예에서 stopPropagation () 을 호출하지 않으면 단추를 눌렀을 때 두 개의 경고 상자가 나타납니다.하지만 클릭 이벤트는 문서에 전파되지 않습니다.body, 따라서 이 요소에 등록된 oncick 이벤트 처리 프로그램을 터치하지 않습니다.cancelBubble 속성은 DOM의 stopPropagation () 방법과 같은 작용을 합니다. 모두 가짜의 거품을 멈추는 데 사용됩니다.IE는 이벤트 캡처를 지원하지 않기 때문에 이벤트 거품을 없앨 수 있습니다.단stopPropagation()은 이벤트 캡처와 거품을 동시에 제거할 수 있습니다.예:

var btn = document.getElementById("myBtn");
btn.onclick = fuc=nction(){
      alert("Click");
      window.event.cancelBubble = true;
};
document.body.onclick = function(){
      alert("Body click");
}

onclick 이벤트 처리 프로그램에서 cancelBubble를true로 설정하면 이벤트가 거품을 통해document를 촉발하는 것을 막을 수 있습니다.body에 등록된 이벤트 처리 프로그램입니다.결과적으로 버튼을 클릭하면 경고 상자가 하나만 표시됩니다.
주의: 시간 처리 프로그램이 실행되는 동안에만 이벤트 대상이 존재합니다. 이벤트 처리 프로그램이 실행되면 이벤트 대상은 삭제됩니다.