淺談JavaScript的Polymer架構中的事件綁定_基礎知識

既然是一套完整的前端架構那就一定有提供事件綁定相關的支援。其實在之前的例子中就使用過事件綁定，只是沒有單獨系統地介紹過而已。 Polymer 的事件思想是對事件處理函數儘可能地都命名並定義到 VM 上，我覺得這個做法是在有意地把 VM 這一層隔離出來。
　　下面這個例子給按鈕和其所在的 Shadow DOM Host 都綁定了個事件，點擊按鈕後兩個事件都會觸發。
運行

<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 是一個用於給當前 Shadow DOM Host 添加事件的（雖然我覺得它沒卵用）。直接在 DOM 元素上的 on-* 屬性也可以給某個元素繫結事件。這些方式綁定的都是 DOM 事件，事件觸發時傳遞過去的對象就是原生的事件對象。
　　除了以上這些直接作為屬性設定的事件綁定方式之外，我們還可以動態地綁定事件。
運行

<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 總是希望我們對事件處理函數命名，比如其內建的 listen 方法對元素繫結的不是一個事件處理函數，而是一個事件處理函數名。也許這麼做的目的是將 VM 和 M 完全隔離開來，但是我並不喜歡這樣。不過 Shadow DOM Host 本身也是一個原生對象，所以直接使用原生的 addEventListener 也是可以的，不過既然架構內有提供，我也不推薦寫原生。也許是我的思想太 low 的，無法領悟 Polymer 如此設計的良苦用心吧？