부모 div에 이벤트를 바인딩하여 체크 박스 'change'이벤트가 작동합니다.

Question

지금까지 나는 jQuery의 change 이벤트가 <select>, <input type="checkbox"> 및 <input type="radio">에서만 작동한다고 생각했습니다.

하지만 우연히 나는 change 이벤트를 내 체크 박스의 부모에게 바인딩했으며, 그 이벤트를 확인란 자체에 바인딩 한 것처럼 작동합니다. 어떻게이게 효과가 있니?

<div class="pwc"> 
    <input type="checkbox" id="pwc2" /> 
    <label for="pwc2">Only valid</label> 
</div> 

jQuery 코드 : 대신

$(document).on('change', '#tabs .pwc', function(e) { 
    ... 
}); 

는 : change event이 (Bubbles: Yes보고) 부모 요소에 거품 때문에

$(document).on('change', '#tabs .pwc input:checkbox', function(e) { 
    ... 
}); 

Answer 1

때문이다.

입력 요소가 변경되면 입력 요소에 대한 변경 이벤트가 발생하고 루트 (문서)에 도달 할 때까지 상위 요소에 전파됩니다 (거품).

event 개체의 target을 처리기에서 보면 input 요소에 대해 이벤트가 발생했음을 알 수 있습니다.

변경 이벤트에 event delegation을 어떻게 사용할 수 있는지도 알고 있습니다.