위아래로 다시: 프런트엔드 이벤트 전파에 누락된 기능이 있습니까?

JavaScript와 DOM은 Event API를 사용하여 요소가 조상에게 발생하는 일을 알릴 수 있도록 합니다. 각 요소에는 정확히 하나의 상위 요소(문서 루트까지)만 있으므로 이벤트가 취하는 경로는 선형이고 문서 크기에 비해 상당히 짧기 때문에 이 방법은 잘 작동합니다.

그러나 DOM을 통해 이벤트를 아래쪽으로 전파하는 아날로그 메커니즘은 없습니다.

간단한 예로 다음과 같은 시나리오를 생각해 볼 수 있습니다.

<product-search>
   <search-box></search-box>
   <product-card></product-card>
</product-search>

검색 상자 요소의 API는 일반 DOM API로 쉽게 구축할 수 있습니다. 사용자 입력이 검색을 시작해야 한다고 내부적으로 결정할 때마다 프레임워크:검색과 같은 일종의 이벤트를 내보냅니다.

그런 다음 제품 검색은 단순히 해당 이벤트 자체를 수신할 수 있으며 자동으로 중첩 및 기타 이상한 HTML 헛소리에 대한 탄력성이 매우 높아집니다. 사용자는 그날 더욱 창의력을 발휘하고 싶다면 다양한 검색 구성요소를 사용할 수도 있습니다.

제품 검색 구성 요소가 검색 이벤트를 수신하면 상태 변경 사항을 제품 카드에 다시 전파해야 합니다. 이는 일반적인 메커니즘을 사용하여 수행하는 것이 놀라울 정도로 어렵습니다.

여기서 문제는 a) 제품 검색이 제품 카드 하위에만 국한되지 않고 일부 일반 API를 준수하는 모든 요소와 작동할 수 있다는 점입니다. b) 알림이 필요한 요소가 제품 검색 및 c) 구성 요소에 많은 하위 항목이 있을 수 있으므로 성능 관점에서 샷건 접근 방식이 위험해질 수 있습니다.

내가 아는 한 DOM API에는 이 문제를 완전히 해결하는 기능이 없습니다. 내가 여기서 일을 너무 복잡하게 만들고 있는 걸까? 쉽게 해결할 수 있는 방법이 있나요?

여기서 가장 좋은 아이디어는 querySelectorAll("*")을 사용하고 모든 하위 요소에 버블링되지 않는 이벤트를 무차별적으로 전달하여 a)와 b)를 달성하는 절충안입니다.

여러분은 어떻게 생각하시나요?

위 내용은 위아래로 다시: 프런트엔드 이벤트 전파에 누락된 기능이 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!