이벤트 버블 링 및 캡처의 일반적인 실용적인 사용 예는 무엇입니까?

Question

누군가 jQuery/javascript에서 이벤트 버블 링 및 이벤트 캡처의 실제적인 예를 제공 할 수 있습니까? 이러한 개념을 보여주는 모든 종류의 예제를 볼 수 있지만 항상 일반적인 웹 응용 프로그램에서 실제로 필요하지 않은 것처럼 보입니다.

설명과 코드 조각 모두 크게 감상 할 수있다.

Answer 1

실용적인 이벤트 버블 링?

jQuery를 사용하거나 사용하지 않고 (라이브러리를 사용하지 않고 거품이있는 이벤트를 처리 할 수 ​​있음을 명심하십시오.) 코드를 구조화하여 버블 링을 활용하려는 여러 가지 시나리오가 있습니다.

한 예는 :의 당신이 요소를 동적으로 생성되는 페이지가 있다고 가정 해 보자,하지만 당신은 그 요소에 클릭을 처리 할. 이벤트 핸들러가 존재하기 전에 이벤트 핸들러에 직접 바인드 할 수는 없지만 이벤트 핸들러를 작성할 때 개별 핸들러를 바인드하면 약간의 어려움이 있습니다. 대신, 컨테이너 개체에 이벤트 처리기를 바인딩 : 컨테이너에 개별 요소의 이벤트는 버블 링 위로를 클릭하지만 당신은 여전히 ​​클릭 된 요소를 말할 수 - jQuery를이 쉽게 당신이 .on(), 또는 .delegate()의 적절한 구문을 사용하는 경우 (또는 jquery의 실제 버전이있는 경우 .live()) this을 클릭 된 요소로 설정했기 때문입니다.

<div id="someContainer"></div> 

$("#someContainer").on("click", ".dynamicElement", function() { 
    // this is the element, do something with it 
}); 

이것은 "someContainer"의 하위 클래스 "dynamicElement"인 요소의 클릭에 무언가를 DIV 말한다. "dynamicElement"요소가 페이지로드시 존재했는지, 다른 사용자 조치에 대한 응답으로 나중에 추가되었는지, Ajax로로드되었는지에 관계없이 작동합니다. 나는 동적으로 DIV에 이미지를 추가

Answer 2

, 나는 포함하는 사업부에서 온로드 이벤트를 캡처하는 이벤트 버블 링을 사용하여 계획.