Yahoo! UI（YUI） 学习笔记 之 EVENT and DOM

    小弟最近学习javascript,继而学习了一个js类库---YUI。

先总体说一下YUI的类库。YUI是一个基于事件和DOM的库。所以要学习它必须首先学习EVENT和DOM两个主要的组件。

1.event 库

yui捕捉事件是依赖于event组件。而几乎所有的web操作都是基于事件的。所以要想使用yui最好先看event库。

首先从一个简单的例子开始。我们的需求是：点击一个div区域。返回一个对话框显示HelloWorld。根据需求我们发现这个需求很简单，就是处理一个click事件。处理分为一下3步：

1导入依赖包

js 代码

1. <script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>   
2. <script type="text/javascript" src="../../build/event/event.js"></script>   

2编写响应事件的function

js 代码

1. //A function that pops up a "Hello World" alert:   
2. var helloWorld = function(e) {   
3.     alert("Hello World!");   
4. }  

3处理事件(div 区域的id是container)

js 代码

1.   
2. YAHOO.util.Event.addListener("container", "click", helloWorld);   

 

使用这个代码就可以实现了事件响应，但是假如我希望在触发这个事件之前先判断这个区域是否包含名为test的class呢，比如

这个div为：

js 代码

1. <div "container" class="yui test">  </div>  

 这时我们就要向web中导入dom组件了

js 代码

1. <script type="text/javascript" src="../../build/dom/dom.js"></script>   

之后再修改click的响应function

1. var helloWorld = function(e) {       
2. if(YAHOO.util.Dom.hasClass('container', 'test'))         
3. alert("Hello World!");       
4. }   

 这样就基本实现了我们的功能。也基本了解了yui的处理机制。它的处理机制就是根据你的不同需求调用不同的组件，在每个组件中都有一个全局的对象:YAHOO.util.XXX 其中XXX就是你调用的组件，而组件中的方法我们可以从帮助文件中方便的获得。