Introduction to event binding in the Polymer framework of JavaScript

This article mainly introduces the event binding in the JavaScript Polymer framework. Polymer is a WebUI framework developed by Google, if you need a complete front-end framework, you must provide event binding support. In fact, event binding has been used in the previous example, but it has not been systematically introduced. Polymer's idea of events is to name all event processing functions as much as possible and define them on the VM. I think this practice is intentionally to isolate the VM layer.
In the following example, an event is bound to both the button and its Shadow DOM Host. After you click the button, both events are triggered.
Run

Script var Polymer = {dom: 'shadow'}; script
 
  
    
   Click (= ~ ω ~ =) 
  Script Polymer ({is: 'demo-test', listeners: {'click': 'clickhandler'}, clickHandler: function (e) {lele.log(e.tar get) ;}}); script
 
 

Listeners is used to add events to the current Shadow DOM Host (although I think it is useless ). The on-* attribute on the DOM element can also bind events to an element. These methods are bound to DOM events. When an event is triggered, the objects passed in the past are native event objects.
In addition to these event binding methods directly set as attributes, we can also dynamically bind events.
Run

Script var Polymer = {dom: 'shadow'}; script
 
  
    
   Click (= ~ ω ~ =) 
  Script Polymer ({is: 'demo-test', ready: function () {// Polymer built-in this. listen (this, 'click', 'clickhandler'); // native this. addEventListener ('click', this. clickHandler) ;}, clickHandler: function (e) {console. log (e) ;}}); script
 
 

Polymer always wants us to name the event handler function. For example, its built-in listen method is not bound to an event handler function, but an event handler function name. Maybe the purpose of doing so is to completely isolate the VM and M, but I don't like it. However, the Shadow DOM Host itself is also a native object, so it is also possible to directly use the native addEventListener. However, since it is provided in the framework, I do not recommend writing it to the native. Maybe my mind is too low to comprehend the painstaking efforts of Polymer's design?