A brief discussion on event binding in JavaScript’s Polymer framework_Basic knowledge

Since it is a complete front-end framework, it must provide support related to event binding. In fact, event binding has been used in previous examples, but it has not been introduced systematically. Polymer's event idea is to name event processing functions as much as possible and define them on the VM. I think this approach is to intentionally isolate the VM layer.
The following example binds an event to both the button and the Shadow DOM Host where it is located. When the button is clicked, both events will be triggered.
Run

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <button on-click="clickHandler">求点击 (=~ω~=)</button>
 </template>
 <script>
  Polymer({
   is: 'demo-test',
   listeners: {
    'click': 'clickHandler'
   },
   clickHandler: function(e) {
    console.log(e.target);
   } 
  });
 </script>
</dom-module>

<demo-test></demo-test>

Listeners is used to add events to the current Shadow DOM Host (although I think it is useless). On-* attributes directly on DOM elements can also bind events to an element. These methods are bound to DOM events, and the object passed when the event is triggered is the native event object.
In addition to the above event binding methods that are set directly as properties, we can also bind events dynamically.
Run

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <button>求点击 (=~ω~=)</button>
 </template>
 <script>
  Polymer({
   is: 'demo-test',
   ready: function() {
    // Polymer 内置
    this.listen(this, 'click', 'clickHandler');
    // 原生
    this.addEventListener('click', this.clickHandler);
   },              
   clickHandler: function(e) {     
    console.log(e);
   }
  });
 </script>
</dom-module>

<demo-test></demo-test>

Polymer always wants us to name event processing functions. For example, its built-in listen method binds not an event processing function to an element, but an event processing function name. Maybe the purpose of this is to completely isolate the VM and M, but I don't like this. However, Shadow DOM Host itself is also a native object, so it is also possible to use the native addEventListener directly. However, since it is provided in the framework, I do not recommend writing native objects. Maybe my thinking is too low and I can't understand the good intentions of Polymer's design?