자식 요소가 자손 선택기에 바인딩 될 때 부모 요소에서 이벤트가 시작되는 이유는 무엇입니까?

Question

부모 요소의 이벤트가 자식 이벤트가 발생하기 전에 표시되는 내 코드의 이상한 버그를 넘어서서 내 e.stopPropagation()이 아무 효과가 없음을 의미합니다.

데모 : 예상 하나의 경고를 같이 왼쪽 작품의 녹색 사각형을 클릭

$(document).ready(function() { 
 

 
    // Binding directly to the elements 
 
    $(".red1").on("click", function(e) { 
 
    alert("Clicked red1"); 
 
    }); 
 
    $(".green1").on("click", function(e) { 
 
    alert("Clicked green1"); 
 
    e.stopPropagation(); 
 
    }); 
 

 
    // Binding the child from a descendant selector 
 
    $(".red2").on("click", function(e) { 
 
    alert("Clicked red2"); 
 
    }); 
 
    $("body").on("click", ".green2", function(e) { 
 
    alert("Clicked green2"); 
 
    e.stopPropagation(); 
 
    }); 
 

 
});

.red1, 
 
.red2 { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: #800; 
 
} 
 

 
.green1, 
 
.green2 { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #080; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="red1"> 
 
    <div class="green1"></div> 
 
</div> 
 

 
<div class="red2"> 
 
    <div class="green2"></div> 
 
</div>

• .
• 오른쪽에있는 녹색 사각형을 클릭하면 부모 이벤트가 시작되고 그 다음에 어린이 이벤트가 시작됩니다.

저는 이것이 제 부분에서 바인딩이 어떻게 작동하는지에 대한 오해로 인한 것이라고 생각하지만이 순서대로 발생하는 이유에 대해 머리를 맞지 않는 것 같습니다.

왜 이런 일이 일어 났는지 설명 할 수 있습니까?

Answer 1

위임 된 이벤트 핸들러를 사용하고 있기 때문에 문제가 발생했습니다.

이벤트가 발생하면 이벤트가 지정된 부모 요소 (귀하의 경우 body)까지 버블 링되어야 함을 의미합니다. 이벤트가 .red2을 통과하면 해당 요소에 할당 된 정적 처리기가 실행됩니다. 위임 된 이벤트 핸들러는 이벤트 발생자가 .green2인지 확인합니다. 그럴 경우 위임 된 이벤트 핸들러가 실행됩니다. 이것이 부모 처리자가 먼저 발생하는 이유입니다.

는 그들이 매우 유용합니다, 또는 부모 요소에 모든 이벤트를 배치 할 수없는 경우도 위임 된 이벤트 핸들러를 피할 수 있습니다,이 문제를 방지하고, 다음과 같이 수동으로 발신자를 확인하려면 :

당신이 위임 된 이벤트 핸들러를 사용하고 있기 때문에

$(".red2").on("click", function(e) { 
 
    if ($(e.target).is('.green2')) { 
 
    alert("Clicked green2"); 
 
    e.stopPropagation(); 
 
    } else { 
 
    alert("Clicked red2"); 
 
    } 
 
});

.red1, 
 
.red2 { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: #800; 
 
} 
 

 
.green1, 
 
.green2 { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #080; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="red2"> 
 
    <div class="green2"></div> 
 
</div>