淺談JavaScript的Polymer框架中的事件綁定

更新時(shí)間：2015年07月29日 11:51:04 投稿：goldensun

這篇文章主要介紹了淺談JavaScript的Polymer框架中的事件綁定,Polymer是由Google開(kāi)發(fā)的針對(duì)Web UI的框架,需要的朋友可以參考下

既然是一套完整的前端框架那就一定有提供事件綁定相關(guān)的支持。其實(shí)在之前的例子中就使用過(guò)事件綁定，只是沒(méi)有單獨(dú)系統(tǒng)地介紹過(guò)而已。 Polymer 的事件思想是對(duì)事件處理函數(shù)盡可能地都命名并定義到 VM 上，我覺(jué)得這個(gè)做法是在有意地把 VM 這一層隔離出來(lái)。
　　下面這個(gè)例子給按鈕和其所在的 Shadow DOM Host 都綁定了個(gè)事件，點(diǎn)擊按鈕后兩個(gè)事件都會(huì)觸發(fā)。
運(yùn)行

<script> var Polymer = { dom: 'shadow' }; </script>
<base  />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <button on-click="clickHandler">求點(diǎn)擊 (=~ω~=)</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 是一個(gè)用于給當(dāng)前 Shadow DOM Host 添加事件的（雖然我覺(jué)得它沒(méi)卵用）。直接在 DOM 元素上的 on-* 屬性也可以給某個(gè)元素綁定事件。這些方式綁定的都是 DOM 事件，事件觸發(fā)時(shí)傳遞過(guò)去的對(duì)象就是原生的事件對(duì)象。
　　除了以上這些直接作為屬性設(shè)置的事件綁定方式之外，我們還可以動(dòng)態(tài)地綁定事件。
運(yùn)行

<script> var Polymer = { dom: 'shadow' }; </script>
<base  />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <button>求點(diǎn)擊 (=~ω~=)</button>
 </template>
 <script>
  Polymer({
   is: 'demo-test',
   ready: function() {
    // Polymer 內(nèi)置
    this.listen(this, 'click', 'clickHandler');
    // 原生
    this.addEventListener('click', this.clickHandler);
   },              
   clickHandler: function(e) {     
    console.log(e);
   }
  });
 </script>
</dom-module>

<demo-test></demo-test>

　　Polymer 總是希望我們對(duì)事件處理函數(shù)命名，比如其自帶的 listen 方法對(duì)元素綁定的不是一個(gè)事件處理函數(shù)，而是一個(gè)事件處理函數(shù)名。也許這么做的目的是將 VM 和 M 完全隔離開(kāi)來(lái)，但是我并不喜歡這樣。不過(guò) Shadow DOM Host 本身也是一個(gè)原生對(duì)象，所以直接使用原生的 addEventListener 也是可以的，不過(guò)既然框架內(nèi)有提供，我也不推薦寫(xiě)原生。也許是我的思想太 low 的，無(wú)法領(lǐng)悟 Polymer 如此設(shè)計(jì)的良苦用心吧？

您可能感興趣的文章: