DOM 이벤트를 사용한 이벤트 캡처 및 버블링

Applies to Windows and Windows Phone

JavaScript용 Windows 라이브러리에는 여러 개의 addEventListener 메서드(예: WinJS.Application.addEventListenerWinJS.UI.AppBar.addEventListener)가 있습니다. 모든 메서드에는 이벤트 캡처를 원하는 경우 true로 설정되고, 이벤트 버블링을 원하는 경우 false로 설정되는 useCapture 매개 변수가 들어 있습니다. 자세한 내용은 이벤트 캡처이벤트 버블링을 참조하세요.

addEventListener 메서드에서 useCapture 매개 변수를 true로 설정하면 이벤트 처리 순서가 하향식이 됩니다. 즉, DOM 트리에서 지정된 이벤트에 대해 둘 이상의 요소에 속하는 이벤트 처리기가 있는 경우 트리에서 가장 높은 요소에 속하는 처리기가 맨 먼저 호출되고 하위 요소에 속하는 처리기가 그 다음에 호출됩니다. useCapture 매개 변수를 false로 설정하면 대상 요소에 속하는 처리기가 먼저 호출되고, 상위 요소에 속하는 처리기가 그 다음에 호출됩니다.

이 예에서 WinJS.UI.ToggleSwitch를 만들고 WinJS.UI.ToggleSwitchdocument 개체에 동일한 처리기 변경 함수를 추가합니다. useCapture 매개 변수를 true로 설정한 경우 document 개체의 처리기가 맨 먼저 호출되고 WinJS.UI.ToggleSwitch 개체의 처리기가 그 다음에 호출됩니다.

이벤트에서 this 키워드는 이벤트의 대상을 참조하므로 "[개체 HTMLDocument]에 대한 변경 이벤트"가 나온 다음 "[개체 HTMLDivElement]에 대한 변경 이벤트"가 나옵니다. useCapture 매개 변수를 false로 설정하면 DatePicker 처리기에 대한 출력이 먼저 나온 다음 문서 처리기에 대한 출력이 나옵니다.

토글 컨트롤 호스트 및 출력을 위한 HTML


<div id="div"></div>
<div id="report"></div>


이벤트 처리기 추가를 위한 JavaScript




var toggle = new WinJS.UI.ToggleSwitch(document.getElementById("div"));

toggle.addEventListener("change", handleChange, true);
document.addEventListener("change", handleChange, true);

function handleChange(ev) {
    var elem = document.getElementById("report");
    elem.innerHTML += 
       toStaticHTML("<br> change event for " + this);
}


 

 

표시:
© 2015 Microsoft