4
<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!

abcd_1234
  • 165
  • 2
  • 11
  • Listeners are not installed from `properties` in Polymer 2.0 - You need to listen to them explicitly/imperatively via `addEventListener`. Secondly, listeners need to be explicitly fired via a `window.DispatchEvent(e)` call. You don't need `listeners` if all you want to do is fire a method from a click. Just do `on-click="myMethod"`. Your best bet is to read https://www.polymer-project.org/2.0/docs/upgrade instead of writing code in the dark like you do. Your other questions about Polymer 2.0 indicate that you ask questions without reading documentation at all. – nicholaswmin May 02 '17 at 15:38
  • I apologize for the lame questions, I'm very new to web development. Actually, I have tried to read the documentation many times but it seems too complex to me. I have a basic understanding of js but I have been struggling with polymer. Can you provide me with some resources to refer to before trying polymer again? or please check-out this new issue that I have created: http://stackoverflow.com/questions/43760236/polymer-2-0-what-are-the-prerequisites – abcd_1234 May 03 '17 at 12:33
  • perhaps you need to start reading on the basics of Web Development first (what is a DOM, what is data binding etc, what are events) and then read the documentation again. Your other question is not a good fit for S.O. – nicholaswmin May 03 '17 at 16:29

2 Answers2

6

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 (e.g. 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

MajorBreakfast
  • 830
  • 8
  • 7
-1

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) {

}
Pang
  • 9,564
  • 146
  • 81
  • 122
Omar Licona Islas
  • 1
  • 1
  • This code has a bug: `this.regular.bind(this)` creates a new function, so `this.removeEventListener('click', this.regular)` won't remove the listener as there is no listener for `this.regular`. It's for what was returned by `this.regular.bind(this)`. Fix: Store the function in a property. – MajorBreakfast Sep 02 '17 at 10:30