YUI 学习笔记:Event
作者:Dreamer 来源:Dreamer博客 发布时间:2009-02-21 11:15:00
英文的文档在这里,详细全面,本文仅为自己的学习笔记,只是试图通过转述加深自己的学习,不详细不全面。
由于浏览器之间的差异,所以在JS中监听事件的时候可能就需要做一些判断。YUI Event提供了一个简单的接口让你可以方便地监听事件而不用考虑浏览器之间的差异,这样你就可以把注意力放在代码逻辑上。你还可以使用YUI Event创建自定义事件对象,其他对象可以监听这个事件并且在事件触发时做出响应。YUI Event有以下的特性:
1.灵活方便地为某个元素添加事件处理函数
2.如果要添加事件处理函数的元素尚不可用,会自动延期至元素可用后添加(这个特性很cool)
3.自动定位作用域,也可以指定
4.可以在检测到某个元素之后立刻执行某个处理函数
(更多请看英文文档)
在使用YUI Event之前,需要先载入两个外部JS:
<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的使用方式:
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 函数,用法如下:
YAHOO.util.Event.removeListener("myelementid", "click", fnCallback1);
如果不加第三个参数 fnCallback1的话,那么相应元素上的所有处理click事件的函数都会被移除。另外还有一个强大的函数 YAHOO.util.Event.purgeElement 可以移除所有通过 YAHOO.util.Event.addListener 绑定的事件处理函数,它还支持递归,可以应用到指定元素和它的子元素上,也可以只移除指定事件的处理函数。用法如下:
// 移除所有处理函数
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检测到指定元素的时候立即执行某个函数,用法如下:
YAHOO.util.Event.onAvailable(id, fnOnAvailable);
onContentReady 方法和 onAvailable 的不同之处在于,onContentReady 方法不止检测指定元素是否已经存在,还检测指定元素的 nextSibling 是否已经存在,如果二者都存在则可以认为指定元素已经完全load下来了。如果指定元素恰好没有 nextSibling,那么onContentReady 方法会和window.load事件一起触发。
YUI Event中的onDOMReady 方法也很好用,顾名思义,它会在DOM结构加载完毕的时候执行某个函数。用法如下:
function init() {
YAHOO.util.Dom.setStyle("hidden_element", "visibility", "");
}
YAHOO.util.Event.onDOMReady(init);
它相对于window.load的好处就是:只要DOM结构加载完毕就会触发,而不需要等待图片加载完毕。
下面说一下自定义对象。在YUI中,可以使用YAHOO.util.CustomEvent来创建自定义对象,用法如下:
var event1 = new YAHOO.util.CustomEvent("event1", obj);
其中第一个参数是事件类型,第二个参数是事件作用域。其它参数请看这里。创建完毕之后其它的元素就可以通过自定义事件对象的subscribe方法来监听该事件了:
event1.subscribe(fnCallback,obj);
第一个参数是callback函数,第二个参数是传给callback函数在其中可以用this表示的对象。其实在YUI Event中你可以将任意的对象传给callback函数,很方便。
P.S.:业余时间用来学习还是没有太多时间可以用,以后还是争取找机会专门去搞前端的东西。
猜你喜欢
- 面对不断成长的用户,跟随用户的脚步齐步向前,做引起共鸣的改变,去除低龄化的设计,用成熟稳重的心态面对用户。QQBanner自2006 年推出
- 如何用SQL 建表? 如下:CREATE TABLE statement
- 后台数据库: [Microsoft Access] 与 [Microsoft Sql Server] 更换之后,ASP代码应注意要修改的一些
- ASP长文章分页代码实例,也许你会问一篇文章为什么还要进行分页呢?因为文章有短有长,当你的文章很长的时候,如果就一个页面都显示出来的话,读者
- 一、前言:在经过一段时间的存储过程开发之后,写下了一些开发时候的小结和经验与大家共享,希望对大家有益,主要是针对Sybase和SQL Ser
- 一直很想做这个效果,原理是监听鼠标滚轮事件;可将此效果继续发散到其他应用上,如图片缩放,页面缩放等。演示:<!DOCTYPE html
- 数据库操作类在网上一搜一大把,我这并不比那些好,只是是自己写的,用着更习惯。所以我这个类没有什么特别的地方,只是自己用着习惯罢了,至于效率等
- JavaScript组件打包模式js组件通常带着css image ,但这样使用起来可能会有些小麻烦,为了让组件足够的solo,有了把css
- 1.样式的重用性CSS布局的网页最大的特点就是样式的可重用性,利用class选择符重复将某个样式属性多次在网页中使用,以减少不断定义样式属性
- 静态页面是蜘蛛喜欢的,会得到蜘蛛经常光顾的,以至于网站上的内容会得到搜索引擎更多的收录。这里介绍一个asp伪静态的程序实现方法数据库是acc
- 前一段时间就安装了AspJpeg 2.0,一直没有时间去测试,直到昨天晚上因为服务器无法访问才在本机测试下,特分享下测试结果,只针对GIF图
- 1.触发器概述触发器是SQL Server数据库应用中一个重要工具,是一种特殊类型的存储过程,应用非常广泛。一般存储过程主要通过存储过程名而
- 一、垃圾还是经典网页技术更新很快,一个网站的界面设计寿命仅仅2-3年而已。不管是垃圾还是精品,都没有所谓的经典。经典只存在于是哪个首次成功创
- 有个帖子写的检查全角的 <script> fun
- CSS 文件的大小和所引起的 HTTP 的请求数是 CSS 性能的最关键因素回流(reflow)和渲染时间(非常!)没那么重要副本(dupl
- 如何直接调用Excel数据?在ASP中,不用ODBC,如何直接调用Excel数据? 在调用处理处,究竟是使用:xlApp.qui
- body {font-family: Arial, sans-serif; }这是我迄今
- 如何同时处理数据库和页面错误? If Err.Number = 0 And ob
- 大概在2004年初的时候,我第一次买了一本很厚的书,名字或许叫《Dreamweaver MX从入门到精通》,很认真看着书并实践操作大约三分之
- 影响的范围: IE的所有版本在表单的radio/checkbox控件中,一旦他们的DOM结构被更改过就会出现这个bug。bug描述当象下例中