前端组件化Polymer入门教程(8)——事件

可以在listeners对象中监听事件

<x-custom></x-custom>
<dom-module id="x-custom">
  <template>
    <div>I will respond</div>
    <div>to a tap on</div>
    <div>any of my children!</div>
    <div id="special">I am special!</div>
  </template>

  <script>
    Polymer({

      is: 'x-custom',

      listeners: {
        'tap': 'regularTap',
        'special.tap': 'specialTap'
      },

      regularTap: function(e) {
        alert("Thank you for tapping");
      },

      specialTap: function(e) {
        alert("It was special tapping");
      }

    });
  </script>
</dom-module>

 'special.tap': 'specialTap'

这句话的意思是给id为special的元素单独指定一个tap事件。

除了通过这种方式，我们还可以这样。

<x-custom></x-custom>
<dom-module id="x-custom">
  <template>
    <button id="btn">点击我！</button>
  </template>

  <script>
    Polymer({
      is: 'x-custom',
      attached:function(){
        this.listen(this.$.btn,'click','sayHello');
      },
      sayHello:function(){
        console.log('sayHello');
      }

    });
  </script>
</dom-module>

this.listen(要添加事件的元素, 事件, 具体事件);

this表示最外层的元素，通过this.$可以获取id元素。

删除事件
this.unlisten(this.$.myButton, 'tap', 'onTap');