x- 태그 이벤트 위임 : 루트 요소 액세스

jpec

사용자 지정 요소의 닫기 버튼에 '탭'이벤트를 위임 한 close()다음 루트 요소 에서 메서드를 호출해야합니다 . 다음은 예입니다.

xtag.register('settings-pane', {
  lifecycle: {
    created: function () {
      var tpl = document.getElementById('settings-pane'),
          clone = document.importNode(tpl.content, true);
      
      this.appendChild(clone);
    }
  },
  events: {
    'tap:delegate(button.close)': function (e) {
      rootElement.close(); // <- I don't know the best way to get rootElement
    }
  },
  methods: {
    close: function () {
      this.classList.add('hidden');
    }
  }
});
<template id="settings-pane">
  <button class="close">✖</button>
</template>

csuwldcat

안녕하세요, 저는 도서관 작성자입니다. 정리해 보겠습니다.

DOM, X-Tag 또는 vanilla JS에서 설정 한 모든 리스너의 경우 항상 표준 속성 e.currentTarget을 사용하여 리스너가 연결된 노드에 액세스 할 수 있습니다 . X-Tag의 경우 delegate의사 사용 여부에 관계없이 e.currentTarget항상 사용자 지정 요소를 참조합니다.

xtag.register('x-foo', {
  content: '<input /><span></span>',
  events: {
    focus: function(e){
      // e.currentTarget === your x-foo element
    },
    'tap:delegate(span)': function(e){
      // e.currentTarget still === your x-foo element
      // 'this' reference set to matched span element
    }
  }
});

이것은 이벤트 리스너가 첨부 된 요소에 액세스하기위한 표준 API입니다. 자세한 내용은 다음을 참조 하십시오. https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다debugcn@gmail.com 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

폴리머-루트 요소 액세스

분류에서Dev

다이어그램 요소의 JSF / 프라임 페이스 이벤트

분류에서Dev

가려진 이벤트를 처리하기 위해 Windows Phone 액세스 루트 프레임

분류에서Dev

루트 태그에있는 xslt의 네임 스페이스

분류에서Dev

Svelte 스크립트 버그 : 스위치 요소 클릭 이벤트가 발생하지 않습니다.

분류에서Dev

jQuery : 단일 요소에 대한 태그 이벤트 재정의

분류에서Dev

Vanilla JS 이벤트 위임-대상 요소의 하위 요소 처리

분류에서Dev

Angularjs : li 태그의 자식 요소에 마우스 오버 / 이탈 이벤트 할당

분류에서Dev

src 속성없이 트위터 iframe의 html 요소에 액세스하기

분류에서Dev

루프 내부에 이벤트 리스너를 추가하고 요소의 태그를 얻는 가장 좋은 방법

분류에서Dev

이벤트 위임 및 if 문 내의 요소를 통해 반복

분류에서Dev

선택한 요소에 jQuery 이벤트 위임 사용

분류에서Dev

위임 된 이벤트 : 많은 요소의 선택자

분류에서Dev

ember 구성 요소 작업에서 jquery 이벤트에 액세스

분류에서Dev

ember 구성 요소 작업에서 jquery 이벤트에 액세스

분류에서Dev

ember에서 컨트롤러의 루트 HTML 태그에 액세스

분류에서Dev

Vue-마운트 후 하위 구성 요소 기본 소품에 액세스

분류에서Dev

Webkit 버그 : 마우스 이벤트에 요소가 나타남

분류에서Dev

소켓 이벤트 핸들러 함수에서 반응 상태에 액세스 할 수 없습니다.

분류에서Dev

태피스트리 구성 요소에서 봄 이벤트 수신

분류에서Dev

네임 스페이스가있는 xpath 쿼리 루트 요소

분류에서Dev

루트 요소의 dataweave xml 네임 스페이스 선언

분류에서Dev

루트 요소에 네임 스페이스 추가

분류에서Dev

루프의 배열 요소에 액세스하려고하면 세그먼트 오류가 발생합니다. 이유는 무엇입니까?

분류에서Dev

스크립트 태그 및 페이지 유효성을위한 최소 요구 사항

분류에서Dev

자바 스크립트 이벤트 위임에서 루프 사용

분류에서Dev

setState를 사용하여 상위 구성 요소의 데이터 세트에 액세스

분류에서Dev

이벤트를 위임하지만 하위 div 내의 특정 요소 제외

분류에서Dev

루트 액세스없이 소스에서 와인 설치

Related 관련 기사

  1. 1

    폴리머-루트 요소 액세스

  2. 2

    다이어그램 요소의 JSF / 프라임 페이스 이벤트

  3. 3

    가려진 이벤트를 처리하기 위해 Windows Phone 액세스 루트 프레임

  4. 4

    루트 태그에있는 xslt의 네임 스페이스

  5. 5

    Svelte 스크립트 버그 : 스위치 요소 클릭 이벤트가 발생하지 않습니다.

  6. 6

    jQuery : 단일 요소에 대한 태그 이벤트 재정의

  7. 7

    Vanilla JS 이벤트 위임-대상 요소의 하위 요소 처리

  8. 8

    Angularjs : li 태그의 자식 요소에 마우스 오버 / 이탈 이벤트 할당

  9. 9

    src 속성없이 트위터 iframe의 html 요소에 액세스하기

  10. 10

    루프 내부에 이벤트 리스너를 추가하고 요소의 태그를 얻는 가장 좋은 방법

  11. 11

    이벤트 위임 및 if 문 내의 요소를 통해 반복

  12. 12

    선택한 요소에 jQuery 이벤트 위임 사용

  13. 13

    위임 된 이벤트 : 많은 요소의 선택자

  14. 14

    ember 구성 요소 작업에서 jquery 이벤트에 액세스

  15. 15

    ember 구성 요소 작업에서 jquery 이벤트에 액세스

  16. 16

    ember에서 컨트롤러의 루트 HTML 태그에 액세스

  17. 17

    Vue-마운트 후 하위 구성 요소 기본 소품에 액세스

  18. 18

    Webkit 버그 : 마우스 이벤트에 요소가 나타남

  19. 19

    소켓 이벤트 핸들러 함수에서 반응 상태에 액세스 할 수 없습니다.

  20. 20

    태피스트리 구성 요소에서 봄 이벤트 수신

  21. 21

    네임 스페이스가있는 xpath 쿼리 루트 요소

  22. 22

    루트 요소의 dataweave xml 네임 스페이스 선언

  23. 23

    루트 요소에 네임 스페이스 추가

  24. 24

    루프의 배열 요소에 액세스하려고하면 세그먼트 오류가 발생합니다. 이유는 무엇입니까?

  25. 25

    스크립트 태그 및 페이지 유효성을위한 최소 요구 사항

  26. 26

    자바 스크립트 이벤트 위임에서 루프 사용

  27. 27

    setState를 사용하여 상위 구성 요소의 데이터 세트에 액세스

  28. 28

    이벤트를 위임하지만 하위 div 내의 특정 요소 제외

  29. 29

    루트 액세스없이 소스에서 와인 설치

뜨겁다태그

보관