Polymer 2.0：听众无法工作

Question

<dom-module id="polymer-starterkit-app">
  <template>
    <style>
        :host {
        display: block;
        }
        #box{
            width: 200px;
            height: 100px;
            border: 1px solid #000;
        }  
    </style>
    <h2>Hello, [[prop1]]!</h2>
    <paper-input label="hello">

    </paper-input>

    <div id="box" on-click="boxTap"></div>
  </template>

  <script>
    /** @polymerElement */
    class PolymerStarterkitApp extends Polymer.Element {
      static get is() { return 'polymer-starterkit-app'; }
      static get properties() {
        return {
          prop1: {
            type: String,
            value: 'polymer-starterkit-app'
          },
          listeners:{
            'click':'regular'
          },
          regular:function(){
              console.log('regular')
          }    

        };


      }
     boxTap(){
        console.log('boxTap')
     }

    }

    window.customElements.define(PolymerStarterkitApp.is, PolymerStarterkitApp);
  </script>
</dom-module>

As shown in the code above, I have tried to define a simple listener on-tap on my div with the class box but it doesn't seem to work! I think I'm using the wrong syntax. Also, why should we use listeners if we can simply use predefined listeners like on-click and on-tap? I would really appreciate any type of help!

Answer 1

Edit: I helped updating Polymer's documentation. It's now very clear and detailed. https://www.polymer-project.org/2.0/docs/devguide/events#imperative-listeners Just read that and you're good. TL;DR: The listeners object is no more in Polymer 2.0, but there's a new way to do it.

---

You could simply set them up in ready() . There is no need to use .bind() in this case because this will be your custom element in the callback because it's the event's current target.

ready () {
  super.ready()
  this.addEventListener('my-event', this._onMyEvent)
}

_onMyEvent (event) { /* ... */ }

If you need to listen for events on something that is not your custom element itself (eg window ), then do it the way it is shown in the Polymer documentation:

constructor() {
  super();
  this._boundListener = this._myLocationListener.bind(this);
}

connectedCallback() {
  super.connectedCallback();
  window.addEventListener('hashchange', this._boundListener);
}

disconnectedCallback() {
  super.disconnectedCallback();
  window.removeEventListener('hashchange', this._boundListener);
}

Source: https://www.polymer-project.org/2.0/docs/devguide/events#imperative-listeners

Answer 2

You must create the listener manually

connectedCallback() {
    super.connectedCallback();
    this.addEventListener('click', this.regular.bind(this));
}

disconnectedCallback() {
    super.disconnetedCallback();
    this.removeEventListener('click', this.regular);
}

regular() {
    console.log('hello');
}

However, to add a listener to an element like the div, you need to add Polymer.GestureEventListeners

class PolymerStarterkitApp extends Polymer.GestureEventListeners(Polymer.Element) {

}