BUI基础-方法和事件

控件的方法

由于BUI的控件是基于原型链的，所以BUI中控件的方法都是在prototype上的，可以调用自己的或者父控件定义的方法。

控件的事件

控件的事件是由Observable类定义的，所有的控件都是此类的子类，所以Observable的属性和方法，所有控件都支持。

Observable类的方法的API在最下面，主要有以下几个：

1. on : 注册事件
2. off: 移除事件
3. fire：触发事件

<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. //触发事件

10. list.fire('itemclick');

11. //移除事件

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

13. </script>

</pre>

属性与方法和事件

在上一章节里我们详细的讲述了属性,属性的设置和获取有几个相关的方法：

1. get : 获取属性
2. set : 设置属性，触发属性更改事件
3. setInternal : 设置属性，不触发属性更改事件

在设置属性值时，会触发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的构造函数中

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({ //创建对象

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'); //触发beforeAChange,触发afterAchange

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

28. a.setInternal('a','new a1'); //不触发任何事件

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控件编写的学习中。