Development Tip

Aurelia 델리게이트 대 트리거 : 언제 델리게이트 또는 트리거를 사용해야하는지 어떻게 알 수 있습니까?

yourdevel 2020. 11. 11. 20:44
반응형

Aurelia 델리게이트 대 트리거 : 언제 델리게이트 또는 트리거를 사용해야하는지 어떻게 알 수 있습니까?


Aurelia 프레임 워크로 작업하는 방법을 배우려고합니다. 그렇게하면서 이벤트 바인딩 방법에 관한 문서를 여기 에서 읽었습니다 . 문서는 기본적으로 위임 사용을 제안합니다. 나는 그들이 블로그 게시물 중 하나에 제공 한 plunkr를 포크하고 약간 추가했습니다. 전체 플렁크가 여기에 있습니다 .


app.html

<template>
    <input value.bind="pageInput" blur.delegate="showAlert()" placeholder="delegate()" />
    <input value.bind="pageInput" blur.trigger="showAlert()" placeholder="trigger()" />

    <button type="button" click.delegate="showAlert()">delegate()</button>
    <button type="button" click.trigger="showAlert()">trigger()</button>
</template>

app.js

export class App {
  showAlert() {
    alert('showAlert()');
  }
}

plunkr에서 볼 수 있듯이 blur.trigger / click.delegate / click.trigger는 모두 이벤트를 실행하지만 blur.delegate실행 하지 않습니다.

왜 그렇습니까?

.delegate작동하지 않을 때를 어떻게 결정할 수 있습니까 (물론 수동으로 테스트하지 않고)?


사용할 delegate수없는 경우를 제외하고 사용하십시오 delegate.

이벤트 위임은 응용 프로그램 성능을 향상시키는 데 사용되는 기술입니다. 대부분의 DOM 이벤트의 "버블 링"특성을 활용하여 이벤트 구독 수를 대폭 줄입니다. 이벤트 위임을 사용하면 핸들러가 개별 요소에 연결되지 않습니다. 대신 단일 이벤트 핸들러가 body 요소와 같은 최상위 노드에 연결됩니다. 이벤트가이 공유 된 최상위 처리기로 버블 링되면 이벤트 위임 논리는 이벤트의 대상 에 따라 적절한 처리기를 호출합니다 .

이벤트 위임 을 특정 이벤트와 함께 사용할 수 있는지 확인하려면 google mdn [event name] event. 실제로 웹 플랫폼 관련 Google 검색을 선행 mdn하면 Mozilla 개발자 네트워크에서 고품질 결과가 반환되는 경우가 많습니다. 이벤트의 MDN 페이지에서 이벤트 여부를 확인하십시오 bubbles. 거품이있는 이벤트 만 Aurelia의 delegate바인딩 명령 과 함께 사용할 수 있습니다 . , , 그리고 당신이 사용해야합니다 그래서 이벤트는 버블을하지 않는 이러한 이벤트를 구독 할 바인딩 명령을 사용합니다.blurfocusloadunloadtrigger

다음 은 blur에 대한 MDN 페이지입니다 . 흐림 및 초점 이벤트에 대한 이벤트 위임 기술에 대한 추가 정보가 있습니다.

위의 일반 지침에 대한 예외 :

trigger다음 조건이 충족 될 때 버튼에 사용 합니다.

  1. 버튼을 비활성화해야합니다.
  2. 버튼의 콘텐츠는 텍스트가 아닌 다른 요소로 구성됩니다.

이렇게하면 비활성화 된 버튼의 자식에 대한 클릭이 델리게이트 이벤트 핸들러로 버블 링되지 않습니다. 여기에 더 많은 정보가 있습니다 .

사용 trigger에 대한 click특정 아이폰 OS에서 사용 케이스를 :

아이폰 OS가 아닌 다른 요소에없는 거품 클릭 이벤트를 수행 a, button, inputselect. clicka div같은 비 입력 요소를 구독하고 iOS를 대상으로하는 경우 triggerbinding 명령을 사용합니다 . 여기여기에 더 많은 정보가 있습니다 .


이와 관련하여 Aurelia가 캡처 단계에서 이벤트를 수신하면 블러 델리게이트가 작동하지만 Aurelia에서는 atm을 수행 할 수 없습니다. 누군가가 Aurelia에서 이벤트를 캡처하는 방법에 대한 힌트를 제공 할 수 있다면 흥미로울 것입니다.

이 경우 다음이 작동합니다.

<template>
    <input blur.delegate-capture='showAlert()' />
</template>

참고 URL : https://stackoverflow.com/questions/33904248/aurelia-delegate-vs-trigger-how-do-you-know-when-to-use-delegate-or-trigger

반응형