YUI学习笔记
YUI3学习笔记（1）-YUIGlobal对象
YUI模块是YUI3中的单一核心，所有需要使用YUI3的页面都必须包含该
模块，该模块提供加载功能，可以使用该功能动态加载指定模块，其依
赖模块会被自动加载，所以YUI模块可以看成YUI的一个种子。
YUI模块创建了一个全局对象：YUI，一个页面可以共享一个YUI实例，也
可以使用多个实例。
1要使用YUI全局对象，只需添加如下引用：
Html代码
2如果你想要使用拖放和动画功能，可以使用use()方法加载：
Javascript代码
该方法的最后一个参数是一个回调函数，该函数在完成所有指定模块的加载
后被调用，调用时传递一个参数：一个YUI的实例。
3YUI全局对象有一个Lang对象，其中没有设什么新鲜东西，就是javascript语言
本身的一些功能，但是在这里做了一个统一以便于使用：
Javascript代码
YUI3学习笔记（2）-Node
Node是用来操作DOMnode的工具，实际上每一个Node实例都代表着一个DOMnode，每一
个NodeList都代表着一组DOMnode.
从YUI2.x到YUI3.0相关的api发生了一些变化，具体可以参见本文的最后部分。
1.要使用Node，首先要引入YUI3的种子文件：
Html代码
然后加载相应模块：
Javascript代码
2.获得Node
可以使用YUI.one()获取Node，该方法的参数可以是一个Node，也可以是一个选择器（selector）,
在使用选择器时，返回第一个匹配的元素。默认情况下css3选择器不被支持，如果要使用，需要
加载“selector-css3”模块。关于css3selector可以参见这里：
http://www.w3.org/TR/css3-selectors
以下是使用YUI.one()的例子：
Javascript代码
3.访问Node属性
可以使用Node的set，get方法访问Node的属性，需要注意的是如果返回节点的话返回的是
YUINode而不是DOMnode，这一点在其他地方也要注意。
以下是相关的例子：
Javascript代码
4.事件监听
可以用on方法添加事件监听器：
Javascript代码
5.DOM方法
Y.Node提供了所有DOMnode的原有方法
6.NodeList的使用
NodeList提供了与Node相似的API，但是它的处理时对所有NodeList中的所有Node作用的。
例如如下代码对demo的所有子元素添加'bar'类：
Javascript代码
7.查找
Node提供one，all，test方法分别实现查找第一个匹配元素，查找所有匹配元素，测试
是否存在匹配元素的功能
8.YUI2.x和YUI3.x的对应表
YUI2.x的Node功能是由YAHOO.util.Dom提供的，其与YUI3.0的对应关系如下：
（图太大•在下面•••）
YUI3学习笔记（3）-Event
YUI的Event包可以用来操纵DOM事件，也可以自定义事件。
1.要使用Event，首先要引入YUI3的种子文件：
Html代码
然后加载相应模块：
Javascript代码
2.设置事件响应函数:on()
有两个on方法，一个是YUI的，一个是Node的
Y.on("click",handleClick,"#foop")设置元素"#foop"的click事件处理函数为handleClick。
foo.on("click",handleClick)的作用与上面的一样
对于YUI的on方法，参数如下：
1)事件名。关于各事件在主要浏览器中的兼容性，可以参见这里：
http://www.quirksmode.org/dom/events/index.html
2)事件处理句柄
3)元素，可以是多个，多个的写法是这样：["#foop","#bar"]
4)上下文对象，即事件处理函数中的this,如果忽略，就是target元素的Node
5)参数，可以有多个，按顺序为事件处理函数中event之后的参数
3.移除事件响应函数
有三种方式：
1)在事件名前加前缀，然后用YUI的detach移除
2)保存事件句柄，然后通过该句柄移除
3)用YUI的detach，指定事件名、处理函数和元素
Javascript代码
另外，Event.purgeElement可以清理所有通过on添加的事件处理函数，而且可以
设定是否对子元素递归清理。
4.模拟鼠标事件
可以通过Node.simulate()模拟鼠标事件，可以模拟7种鼠标事件：
*click
*dblclick
*mousedown
*mouseup
*mouseover
*mouseout
*mousemove
同时可以指定一些附加信息，例如：
Javascript代码
模拟按下Shift键的click事件，这些附加信息包括：
*detail-click的次数.
*screenX/screenY
*clientX/clientY
*ctrlKey/altKey/shiftKey/metaKey
*button-0：左，1：右,2：中
*relatedTarget
5.模拟键盘事件
可以模拟以下事件：
*keyup
*keydown
*keypress
keyup和keydown必须指定keyCode，keypress必须指定charCode，另外还可以
指定ctrlKey,altKey,shiftKey和metaKey，以下是几个例子：
Javascript代码
6.available(onAvailable)和contentready(onContentReady)事件
available事件在一个元素刚刚出现在DOM树中时触发。
contentready事件在一个元素和它的下一个元素都可以用getElementById获得
时触发，以保证该元素已加载完毕（除了动态加载的内容以外）
7.domready(onDOMReady)事件
domready事件在DOM树构建完成时触发，有可能是在图像加载完毕以前。
8.delegate方法
事件代理(Eventdelegate)机制可以在父元素处唯一绑定一个listener监听该
父元素的多个子元素处发生的事件，以如下的html为例：
以下这段代码将一listener绑定到"container"，却监听着其3个子元素(<li>)处的
click事件：
9.focus和blur事件
DOM的focus和blur事件是不做冒泡传递的，但YUI的Eventutility的focus和blur事件
却可以，因此可以实现集中的事件处理。
以下是一段示例代码：
其中"#toolbar"是一个包含3个按钮的<div>，如下：
10.mouseenter和mouseleave事件
YUI也提供mouseenter和mouseleave事件，代码如下所示：
11.自定义事件
可以使用on实现简单的自定义事件。注册listener是这样的：
激发这个事件是这样的：
另外可以用augment将一对象提升为Eventtarget，用publish定义一个Event，注册listener
还是用on，激发事件还是用fire，下面是示例代码：
（图小的话自己放大•）