控件的方法

由于BUI的控件是基于原型鏈的，所以BUI中控件的方法都是在prototype上的哺壶，可以調(diào)用自己的或者父控件定義的方法。

控件的事件

控件的事件是由Observable類定義的至扰，所有的控件都是此類的子類资锰，所以Observable的屬性和方法，所有控件都支持台妆。

Observable類的方法的API在最下面胖翰，主要有以下幾個：

1. on : 注冊事件
2. off: 移除事件
3. fire：觸發(fā)事件

<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

1. <script>

2. var list = new List({

3. //...

4. });

5. list.render();

6. function callback(){}

7. //注冊事件

8. list.on('itemclick',callback);

9. //觸發(fā)事件

10. list.fire('itemclick');

11. //移除事件

12. list.off('itemclick',callback);

13. </script>

</pre>

屬性與方法和事件

在上一章節(jié)里我們詳細的講述了屬性,屬性的設置和獲取有幾個相關的方法：

1. get : 獲取屬性
2. set : 設置屬性萨咳，觸發(fā)屬性更改事件
3. setInternal : 設置屬性，不觸發(fā)屬性更改事件

在設置屬性值時鹃两，會觸發(fā)2個事件,beforeXxxChagne 和 afterXxxChange事件

<pre class="prettyprint linenums" style="padding: 8px; background-color: rgb(247, 247, 249); border: 1px solid rgb(225, 225, 232); margin-top: 8px; box-shadow: rgb(251, 251, 252) 40px 0px 0px inset, rgb(236, 236, 240) 41px 0px 0px inset; color: rgb(51, 51, 51); font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">

1. <script>

2. //構造類A

3. var A = function(config){

4. A.superclass.constructor.call(this,config); //將自己的配置項傳遞到BUI.Base的構造函數(shù)中

5. };

6. //定義屬性

7. A.ATTRS = {

8. a : {

9. },

10. b : {

11. }

12. };

13. BUI.extend(A,BUI.Base); //使A繼承BUI.Base舀凛，支持屬性

14. var a = new A({ //創(chuàng)建對象

15. a : 'a',

16. b : 'b',

17. c : 'c'

18. });

19. a.on('beforeAChange',function(ev){

20. alert(ev.newVal + ev.prevVal);

21. });

22. a.on('beforeCChange',function(ev){

23. alert(ev.newVal + ev.prevVal);

24. });

25. a.get('a'); //'a'

26. a.set('a','new a'); //觸發(fā)beforeAChange,觸發(fā)afterAchange

27. a.get('a'); //new a

28. a.setInternal('a','new a1'); //不觸發(fā)任何事件

29. a.get('a'); //new a1

30. a.get('c'); // c

31. a.set('c','new c');

32. </script>

</pre>

事件的API

下面只是簡單的列表猛遍，詳細信息請查看API文檔

下一步學習

BUI的方法和事件學習完成后馋记，你可以去看一下如何組織模塊CMD組織模塊，然后進入到BUI控件編寫的學習中宽堆。