Polymer：从父级捕获子元素的事件

Question

我想知道如何捕获来自父级的子元素发生的事件，如下所示。我知道这种方法可以使用this 捕获事件，但我需要子元素中的它。

我不想从li 捕获事件并通过全局变量或其他此类方式将信息传输到foo，因为我最终将实现发送鼠标位置的mousemove 事件每个触发器，并且通过全局变量技术（如 API here 中演示的那样）发送它会非常低效，并且会减慢应用程序的速度。

<polymer-element name="foo">
  <template>
    <ul>
      <li>This is my child element</li>
    </ul>
  </template>
  <script>
    Polymer('foo', {
      ready: function() {
        document.querySelector('li').addEventListener('mousedown', function() {
            console.log('mousedown event working');
        })
      }
    });
  </script>
</polymer-element>

提前感谢您提供的任何见解。

Answer 1

不要使用document.querySelector()，因为您的li 元素位于Polymer 元素的shadow dom 内。顺便提一句。元素名称不正确，it must contain a dash。

您可以使用 Polymer 的automatic node finding 功能来获取li 元素。为元素分配 id 并使用 this.$ 属性（或者，如果您不想分配 id，可以使用 this.shadowRoot.querySelector()）：

<li id="item">This is my child element</li>

this.$.item.addEventListener(...);

但使用 Polymer，您可以将 declaratively assign the callback function 转换为 li 元素，这样代码的可读性会更高：

<polymer-element name="my-foo">
    <template>
        <ul>
            <li on-mousedown="{{mousedown}}">This is my child element</li>
        </ul>
    </template>
    <script>
        Polymer('my-foo', {
            mousedown: function() {
                    console.log('mousedown event working');
            }
        });
    </script>
</polymer-element>