2007-08-11

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

关键字: yui ajax dom

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

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

1.event 库

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

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

1导入依赖包

js 代码
  1. <script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>   
  2. <script type="text/javascript" src="../../build/event/event.js"></script>   

2编写响应事件的function

js 代码
  1. //A function that pops up a "Hello World" alert:   
  2. var helloWorld = function(e) {   
  3.     alert("Hello World!");   
  4. }  

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

js 代码
  1.   
  2. YAHOO.util.Event.addListener("container", "click", helloWorld);   

 

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

这个div为：

js 代码
  1. <div "container" class="yui test">  </div>  

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

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

之后再修改click的响应function

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

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

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

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

wangxin0072000
搜索本博客
存档
最新评论