YUI 学习笔记：Event

转自: http://www.zhuoqun.net/html/y2009/1197.html

由于浏览器之间的差异，所以在JS中监听事件的时候可能就需要做一些判断。YUI Event提供了一个简单的接口让你可以方便地监听事件而不用考虑浏览器之间的差异，这样你就可以把注意力放在代码逻辑上。你还可以使用YUI Event创建自定义事件对象，其他对象可以监听这个事件并且在事件触发时做出响应。YUI Event有以下的特性：

1.灵活方便地为某个元素添加事件处理函数
2.如果要添加事件处理函数的元素尚不可用，会自动延期至元素可用后添加（这个特性很cool）
3.自动定位作用域，也可以指定
4.可以在检测到某个元素之后立刻执行某个处理函数
（更多请看英文文档 ）

在使用YUI Event之前，需要先载入两个外部JS：

1 2 3

< script type= "text/javascript" src= "http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-min.js" ></ script>   < script type= "text/javascript" src= "http://yui.yahooapis.com/2.6.0/build/event/event-min.js" ></ script>

下面我们从一段代码来简单看下YUI Event的使用方式：

1 2 3

var oElement = document.getElementById ( "elementid" ) ; function fnCallback( e) { alert ( "click" ) ; } YAHOO.util .Event .addListener ( oElement, "click" , fnCallback) ;

首先，我们看到首先获得了想要添加事件处理函数的对象oElement，然后定义了一个callback 函数，最后通过YAHOO.util.Event.addListener 进行了事件绑定，绑定之后，当oElement对象上发生了click事件之后，就会调用fnCallback方法。很简单吧。另 外，YAHOO.util.Event.addListener 的第一个参数也可以是元素的id或者id数组，当第一个参数是元素的id或者id数组的时候，如果执行到这段JS的时候相应的元素还没有load完毕，那 么YUI会自动在相应元素load完毕之后执行addListener，很贴心的设计。

如果想要把某个元素上的事件处理函数去掉，也有相应的YAHOO.util.Event.removeListener 函数，用法如下：

1	YAHOO.util .Event .removeListener ( "myelementid" , "click" , fnCallback1) ;

如果不加第三个参数 fnCallback1的话，那么相应元素上的所有处理click事件的函数都会被移除。另外还有一个强大的函数 YAHOO.util.Event.purgeElement 可以移除所有通过 YAHOO.util.Event.addListener 绑定的事件处理函数，它还支持递归，可以应用到指定元素和它的子元素上，也可以只移除指定事件的处理函数。用法如下：

1 2 3 4 5 6

// 移除所有处理函数 YAHOO.util .Event .purgeElement ( myelement) ; // 递归移除所有处理函数 YAHOO.util .Event .purgeElement ( myelement, true ) ; // 只移除click事件的处理函数 YAHOO.util .Event .purgeElement ( myelement, false , "click" ) ;

YUI Event中还有两个很好用的方法：onAvailable 和 onContentReady，这两个方法的用法和参数和YAHOO.util.Event.addListener差不多，不过它们不需要事件类型参 数。其中onAvailable可以在DOM检测到指定元素的时候立即执行某个函数，用法如下：

1	YAHOO.util .Event .onAvailable ( id, fnOnAvailable) ;

onContentReady 方法和 onAvailable 的不同之处在于，onContentReady 方法不止检测指定元素是否已经存在，还检测指定元素的 nextSibling 是否已经存在，如果二者都存在则可以认为指定元素已经完全load下来了。如果指定元素恰好没有 nextSibling，那么onContentReady 方法会和window.load事件一起触发。

YUI Event中的onDOMReady 方法也很好用，顾名思义，它会在DOM结构加载完毕的时候执行某个函数。用法如下：

1 2 3 4

function init( ) { YAHOO.util .Dom .setStyle ( "hidden_element" , "visibility" , "" ) ; } YAHOO.util .Event .onDOMReady ( init) ;

它相对于window.load的好处就是：只要DOM结构加载完毕就会触发，而不需要等待图片加载完毕。

下面说一下自定义对象。在YUI中，可以使用YAHOO.util.CustomEvent来创建自定义对象，用法如下：

1	var event1 = new YAHOO.util .CustomEvent ( "event1" , obj) ;

其中第一个参数是事件类型，第二个参数是事件作用域。其它参数请看这里 。创建完毕之后其它的元素就可以通过自定义事件对象的subscribe方法来监听该事件了：

1	event1.subscribe ( fnCallback, obj) ;

第一个参数是callback函数，第二个参数是传给callback函数在其中可以用this表示的对象。其实在YUI Event中你可以将任意的对象传给callback函数，很方便。