x-tag事件委托:访问根元素

Question

我需要将"tap"事件委托给自定义元素中的关闭按钮,然后在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>

Answer 1

嘿那里,这是图书馆作者,让我澄清一下:

对于您在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