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

既然是一套完整的前端框架那就一定有提供事件綁定相關的支持。其實在之前的例子中就使用過事件綁定，只是沒有單獨系統(tǒng)地介紹過而已。 Polymer 的事件思想是對事件處理函數盡可能地都命名并定義到 VM 上，我覺得這個做法是在有意地把 VM 這一層隔離出來。

下面這個例子給按鈕和其所在的 Shadow DOM Host 都綁定了個事件，點擊按鈕后兩個事件都會觸發(fā)。

運行

1. <script> var Polymer = { dom: 'shadow' }; </script> 
2. <base href="http://www.web-tinker.com/share/" /> 
3. <link rel="import" href="polymer/polymer.html" /> 
4.  
5. <dom-module id="demo-test"> 
6. <template> 
7. <button on-click="clickHandler">求點擊 (=~ω~=)</button> 
8. </template> 
9. <script> 
10. Polymer({ 
11. is: 'demo-test', 
12. listeners: { 
13. 'click': 'clickHandler' 
14. }, 
15. clickHandler: function(e) { 
16. console.log(e.target); 
17. }  
18. }); 
19. </script> 
20. </dom-module> 
21.  
22. <demo-test></demo-test> 

listeners 是一個用于給當前 Shadow DOM Host 添加事件的(雖然我覺得它沒卵用)。直接在 DOM 元素上的 on-* 屬性也可以給某個元素綁定事件。這些方式綁定的都是 DOM 事件，事件觸發(fā)時傳遞過去的對象就是原生的事件對象。

除了以上這些直接作為屬性設置的事件綁定方式之外，我們還可以動態(tài)地綁定事件。

運行

1. <script> var Polymer = { dom: 'shadow' }; </script> 
2. <base href="http://www.web-tinker.com/share/" /> 
3. <link rel="import" href="polymer/polymer.html" /> 
4.  
5. <dom-module id="demo-test"> 
6. <template> 
7. <button>求點擊 (=~ω~=)</button> 
8. </template> 
9. <script> 
10. Polymer({ 
11. is: 'demo-test', 
12. ready: function() { 
13. // Polymer 內置 
14. this.listen(this, 'click', 'clickHandler'); 
15. // 原生 
16. this.addEventListener('click', this.clickHandler); 
17. },  
18. clickHandler: function(e) {  
19. console.log(e); 
20. } 
21. }); 
22. </script> 
23. </dom-module> 
24.  
25. <demo-test></demo-test> 

Polymer 總是希望我們對事件處理函數命名，比如其自帶的 listen 方法對元素綁定的不是一個事件處理函數，而是一個事件處理函數名。也許這么做的目的是將 VM 和 M 完全隔離開來，但是我并不喜歡這樣。不過 Shadow DOM Host 本身也是一個原生對象，所以直接使用原生的 addEventListener 也是可以的，不過既然框架內有提供，我也不推薦寫原生。也許是我的思想太 low 的，無法領悟 Polymer 如此設計的良苦用心吧?