stopPropagation vs. stopImmediatePropagation
차이 무엇 event.stopPropagation()과 event.stopImmediatePropagation()?
stopPropagation어떤 막을 친 실행되는 핸들러 stopImmediatePropagation어떤 상위 핸들러를 방지 할 수 있으며 임의의 다른 실행에서 핸들러
jquery 문서의 빠른 예 :
$("p").click(function(event) {
event.stopImmediatePropagation();
});
$("p").click(function(event) {
// This function won't be executed
$(this).css("background-color", "#f00");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>example</p>이벤트 바인딩 순서는 여기서 중요합니다!
$("p").click(function(event) {
// This function will now trigger
$(this).css("background-color", "#f00");
});
$("p").click(function(event) {
event.stopImmediatePropagation();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>example</p>이러한 전파 중단이 어떻게 작동하는지 보여주는 작은 예입니다.
var state = {
stopPropagation: false,
stopImmediatePropagation: false
};
function handlePropagation(event) {
if (state.stopPropagation) {
event.stopPropagation();
}
if (state.stopImmediatePropagation) {
event.stopImmediatePropagation();
}
}
$("#child").click(function(e) {
handlePropagation(e);
console.log("First event handler on #child");
});
$("#child").click(function(e) {
handlePropagation(e);
console.log("Second event handler on #child");
});
// First this event will fire on the child element, then propogate up and
// fire for the parent element.
$("div").click(function(e) {
handlePropagation(e);
console.log("Event handler on div: #" + this.id);
});
// Enable/disable propogation
$("button").click(function() {
var objectId = this.id;
$(this).toggleClass('active');
state[objectId] = $(this).hasClass('active');
console.log('---------------------');
});div {
padding: 1em;
}
#parent {
background-color: #CCC;
}
#child {
background-color: #000;
padding: 5em;
}
button {
padding: 1em;
font-size: 1em;
}
.active {
background-color: green;
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child"> </div>
</div>
<button id="stopPropagation">Stop Propogation</button>
<button id="stopImmediatePropagation" ">Stop Immediate Propogation</button>바운드 된 세 개의 이벤트 핸들러가 있습니다. 전파를 중단하지 않으면 자식 div에 3 개, 부모 div에 4 개의 경고가 있어야합니다.
이벤트 전파를 중단하면 3 개의 경고가 발생합니다 (모두 내부 하위 div에 있음). 이벤트가 DOM 계층을 전파하지 않기 때문에 부모 div가이를 보지 못하고 핸들러가 실행되지 않습니다.
전파를 즉시 중단하면 하나의 경고 만 표시됩니다. 내부 하위 div에 3 개의 이벤트 처리기가 연결되어 있지만 동일한 요소 내에서도 1 개만 실행되고 추가 전파는 즉시 종료됩니다.
로부터 의 jQuery API :
요소에 대한 추가 처리기가 실행되지 않도록하는 것 외에도이 메서드는 event.stopPropagation ()을 암시 적으로 호출하여 버블 링을 중지합니다. 이벤트가 상위 요소로 버블 링되지 않도록하고 다른 이벤트 핸들러가 동일한 요소에서 실행되도록하기 위해 대신 event.stopPropagation ()을 사용할 수 있습니다.
event.isImmediatePropagationStopped ()를 사용하여이 메소드가 해당 이벤트 오브젝트에서 호출되었는지 여부를 알 수 있습니다.
한마디로 : event.stopPropagation()반면, 같은 요소에 다른 핸들러가 실행 할 수 있습니다 event.stopImmediatePropagation()방지 마다 실행 한 이벤트입니다.
event.stopPropagation부모 요소의 핸들러가 실행되지 못하게합니다.
호출 event.stopImmediatePropagation하면 동일한 요소의 다른 핸들러가 실행되지 않습니다.
나는 늦게 왔지만 구체적인 예를 들어 이것을 말할 수 있습니다.
<table>, with <tr>및을 가지고 있다고 가정 <td>합니다. 지금하자 당신이를 위해 3 이벤트 핸들러를 설정 말을 <td>당신이 할 경우 다음 요소 event.stopPropagation()당신이 설정 한 첫 번째 이벤트 처리기에서 <td>, 다음의 모든 이벤트 핸들러가 <td>계속 실행 하지만, 이벤트는 전파되지 않습니다 <tr>또는 <table>(그리고하지 않습니다 가서까지 <body>, <html>, document, 및 window).
당신이 사용하는 경우 그러나 지금, event.stopImmediatePropagation()첫 번째 이벤트 처리기에서, 다음 의 다른 두 이벤트 핸들러 <td>의지하지 실행 , 그리고까지 전파되지 않습니다 <tr>, <table>(최대 이동하지 않으며까지 <body>, <html>, document, 및 window).
단지를위한 것이 아닙니다 <td>. 다른 요소의 경우 동일한 원칙을 따릅니다.
1) event.stopPropagation():=> 해당 상위 처리기의 실행 만 중지하는 데 사용됩니다.
2) event.stopImmediatePropagation():=> 해당 부모 처리기의 실행을 중지하고 현재 처리기를 제외하고 자체에 연결된 처리기 또는 함수를 중지하는 데 사용됩니다. => 또한 전체 DOM의 현재 요소에 연결된 모든 핸들러를 중지합니다.
예를 들면 다음과 같습니다. Jsfiddle !
감사합니다 -Sahil
event.stopPropagation ()을 사용하면 동일한 요소에있는 다른 핸들러를 실행할 수 있으며 event.stopImmediatePropagation ()은 모든 이벤트가 실행되지 않도록합니다. 예를 들어 아래 jQuery 코드 블록을 참조하십시오.
$("p").click(function(event)
{ event.stopImmediatePropagation();
});
$("p").click(function(event)
{ // This function won't be executed
$(this).css("color", "#fff7e3");
});
이전 예제에서 event.stopPropagation 을 사용한 경우 css를 변경하는 p 요소의 다음 click 이벤트가 시작되지만 event.stopImmediatePropagation () 의 경우 다음 p click 이벤트가 실행되지 않습니다.
여기에 stopPropagation vs stopImmediatePropagation에 대한 JSfiddle 예제를 추가하고 있습니다. JS 피들
let stopProp = document.getElementById('stopPropagation');
let stopImmediate = document.getElementById('stopImmediatebtn');
let defaultbtn = document.getElementById("defalut-btn");
stopProp.addEventListener("click", function(event){
event.stopPropagation();
console.log('stopPropagation..')
})
stopProp.addEventListener("click", function(event){
console.log('AnotherClick')
})
stopImmediate.addEventListener("click", function(event){
event.stopImmediatePropagation();
console.log('stopimmediate')
})
stopImmediate.addEventListener("click", function(event){
console.log('ImmediateStop Another event wont work')
})
defaultbtn.addEventListener("click", function(event){
alert("Default Clik");
})
defaultbtn.addEventListener("click", function(event){
console.log("Second event defined will also work same time...")
})div{
margin: 10px;
}<p>
The simple example for event.stopPropagation and stopImmediatePropagation?
Please open console to view the results and click both button.
</p>
<div >
<button id="stopPropagation">
stopPropagation-Button
</button>
</div>
<div id="grand-div">
<div class="new" id="parent-div">
<button id="stopImmediatebtn">
StopImmediate
</button>
</div>
</div>
<div>
<button id="defalut-btn">
Normat Button
</button>
</div>참고 URL : https://stackoverflow.com/questions/5299740/stoppropagation-vs-stopimmediatepropagation
'Programing' 카테고리의 다른 글
| 기다리지 않고 C #에서 비동기 메서드를 안전하게 호출하는 방법 (0) | 2020.03.24 |
|---|---|
| Visual Studio에서 문서 간 이동을위한 Ctrl + Tab 동작 변경 (0) | 2020.03.24 |
| NodeJS / Express :“app.use”란 무엇입니까? (0) | 2020.03.24 |
| 내용에 맞게 iframe의 너비와 높이를 조정합니다 (0) | 2020.03.24 |
| 신뢰 저장소 및 키 저장소 정의 (0) | 2020.03.24 |