웹 프론트엔드 JS 튜토리얼 위아래로 다시: 프런트엔드 이벤트 전파에 누락된 기능이 있습니까?

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

Oct 06, 2024 pm 04:34 PM

Up and down again: A missing feature in front end event propagation?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

JavaScript로 문자열 문자를 교체하십시오 JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript로 문자열 문자를 교체하십시오

jQuery 날짜가 유효한지 확인하십시오 jQuery 날짜가 유효한지 확인하십시오 Mar 01, 2025 am 08:51 AM

jQuery 날짜가 유효한지 확인하십시오

jQuery는 요소 패딩/마진을 얻습니다 jQuery는 요소 패딩/마진을 얻습니다 Mar 01, 2025 am 08:53 AM

jQuery는 요소 패딩/마진을 얻습니다

10 JQuery 플러그인을 확인할 가치가 있습니다 10 JQuery 플러그인을 확인할 가치가 있습니다 Mar 01, 2025 am 01:29 AM

10 JQuery 플러그인을 확인할 가치가 있습니다

10 JQuery Accordions 탭 10 JQuery Accordions 탭 Mar 01, 2025 am 01:34 AM

10 JQuery Accordions 탭

노드 및 HTTP 콘솔로 HTTP 디버깅 노드 및 HTTP 콘솔로 HTTP 디버깅 Mar 01, 2025 am 01:37 AM

노드 및 HTTP 콘솔로 HTTP 디버깅

사용자 정의 Google 검색 API 설정 자습서 사용자 정의 Google 검색 API 설정 자습서 Mar 04, 2025 am 01:06 AM

사용자 정의 Google 검색 API 설정 자습서

jQuery div에 스크롤 바를 추가합니다 jQuery div에 스크롤 바를 추가합니다 Mar 01, 2025 am 01:30 AM

jQuery div에 스크롤 바를 추가합니다

See all articles