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.:业余时间用来学习还是没有太多时间可以用,以后还是争取找机会专门去搞前端的东西。
猜你喜欢
- 首先恭喜月影,当然希望好书大卖!原文提供了样章下载1.1M,pdf格式的。如果大家想下载可以访问源地址:http://bbs.51js.co
- 最近用layer ui上传文件遇到了一个问题,我想在上传文件之前把data-id传入后台,layer文档找了一下也没有找到类似的说明,经过一
- function commafyback(num) { var x = num.split(','); return par
- networkx是Python的一个包,用于构建和操作复杂的图结构,提供分析图的算法。图是由顶点、边和可选的属性构成的数据结构,顶点表示数据
- **将Python程序(.py)转换为Windows可执行文件(.exe)第一步:安装pyinstaller打开cmd,输入 pip ins
- 用最新版本(2.1.0)的pyshp解析shp文件的records时:records = sf.records()如果records里面含有
- 数据库复制就是由两台服务器,主服务器和备份服务器,主服务器修改后,备份服务器自动修改,在以前的文章中已经做了详细的说明,这里就不在重复.使用
- 使用步骤大致分为两步,就不多废话第一步、修改hosts文件将0.0.0.0 account.jetbrains.com添加到hosts文件最
- 项目结构如下:开始时在setting.py中设置如下;html文件中的写法如下:这样设置一直无法加载静态文件,只需要修改setting.py
- 今天照着样例搞了下tensorboard,发现自己无法显示scalar,而graph却可以正常显示。出现这种情况就说明,tensorfboa
- 本文实例讲述了Python 面向对象静态方法、类方法、属性方法知识点。分享给大家供大家参考,具体如下:(1)静态方法--》-@staticm
- Infopath的使用避免了最终用户以完全手写的方式生成XML数据文件,同时也可以统一XML文件的格式,在MOSS系统和网站开发中被广泛使用
- url标记为变量通过把 URL 的一部分标记为 <variable_name> 就可以在 URL 中添加变量。标记的 部分会作为
- Python3,开一个线程,间隔1秒把一个递增的数字写入队列,再开一个线程,从队列中取出数字并打印到终端#! /usr/bin/env py
- 推荐两文:1、支付宝购买流程 2、支付宝卖家流程 支付宝接口提供最新的ASP、ASP.NET、PHP、JSP等目前网络上最流行的源码包文件,
- DataFrame对象本质上是带有行列索引的二维矩阵,所以欲对DataFrame对象进行转置操作,需要交换行列索引,同时使二维矩阵转置。首先
- 运行go中本地包的时候如果出现这个报错,网上很多说是需要修改GO111MODULE=on, 但是对于我来说都没用, 最后发现是因为命名导致的
- 前言数据库生成环境中经常会遇到表中有重复的数据,或者进行关联过程中产生重复数据,下面介绍三种剔除重复数据的方法,请针对自己的应用场景选择使用
- 代码如下:'================================================== '函数名:
- 1. 非 matlab v7.3 files 读写import scipy.io as sioimport numpy# matFile 读