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

wangxin0072000

浏览: 86758 次
性别:
来自: 北京

最近访客更多访客>>

schy15

haigangyuan2011

hsq56789

下载幸运

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

WEB_JS_CSS

UI YUI Yahoo JavaScript XHTML

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

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

1.event 库

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

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

1导入依赖包

js 代码

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

2编写响应事件的function

js 代码

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

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

js 代码

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

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

这个div为：

js 代码

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

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

js 代码

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

之后再修改click的响应function

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

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

分享到：

Ext与JavaEE之我见(第一部显示层部分) | 关于WEB标准

2007-08-11 19:14
浏览 6707
评论(3)
查看更多

3 楼 wuxing429 2011-01-20

id="container 改成 class=container

2 楼 wuliupo 2009-02-18

maoweiwer 写道

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="../../../javascript/yui/build/event/event.js"></script> <script type="text/javascript" src="../../../javascript/yui/build/yahoo/yahoo.js"></script> <script type="text/javascript"> //A function that pops up a "Hello World" alert:    var helloWorld = function(e) {        alert("Hello World!");    } YAHOO.util.Event.addListener("container", "click", helloWorld); </script> <title>yahoo UI</title> </head> <body> <div id="container" style="background:#999999; line-height:50px; width:300px; text-align:center;">123</div> </body> </html> ----------------------------------------------- 帮我看一下我的代码,为什么我的不行呀..

是不是这样的：
../../../javascript/yui/build/event/event.js
../../../javascript/yui/build/yahoo/yahoo.js
确认上面两个js文件存在，并且yahoo.js在event.js之前引用，你的代码中引用先后顺序错了。

HTML代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../../javascript/yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../../javascript/yui/build/event/event.js"></script>
<script type="text/javascript">
//A function that pops up a "Hello World" alert:
var helloWorld = function(e) {
alert("Hello World!");
}

YAHOO.util.Event.addListener("container", "click", helloWorld);
</script>
<title>yahoo UI</title>
</head>

<body>
<div id="container" style="background:#999999; line-height:50px; width:300px; text-align:center;">123</div>
</body>
</html>

1 楼 maoweiwer 2007-11-02

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../../javascript/yui/build/event/event.js"></script>
<script type="text/javascript" src="../../../javascript/yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript">
//A function that pops up a "Hello World" alert:
var helloWorld = function(e) {
    alert("Hello World!");
}

YAHOO.util.Event.addListener("container", "click", helloWorld);
</script>
<title>yahoo UI</title>
</head>

<body>
<div id="container" style="background:#999999; line-height:50px; width:300px; text-align:center;">123</div>
</body>
</html>

-----------------------------------------------
帮我看一下我的代码,为什么我的不行呀..

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论