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>

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

1 个答案: