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

Question

我想知道如何捕获来自父元素的子元素发生的事件,如下所示.我知道这个方法可以捕获事件,this但我需要从子元素中获取它.

我不想通过全局变量或其他类似的方式从事件中捕获事件li并传输信息,foo因为我最终将实现一个mousemove每个触发器发送鼠标位置的事件,并且通过它发送它的效率非常低全局变量技术(如为API中证明这里),减缓该应用.

<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元素的阴影dom内.顺便说一句.元素名称不正确,必须包含破折号.

您可以使用Polymer 的自动节点查找功能来获取li元素.为元素分配一个id并使用该this.$属性(或者如果你不想分配一个id,你可以使用this.shadowRoot.querySelector()):

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

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

但随着聚合物可以声明指定回调函数的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>