yui学习笔记（三）----dom和event

最新推荐文章于 2022-05-09 16:10:11 发布

Even713

最新推荐文章于 2022-05-09 16:10:11 发布

阅读量1.7k

点赞数

分类专栏： javascript 文章标签： yui stylesheet html function 浏览器 animation

本文链接：https://blog.csdn.net/even713/article/details/5550610

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

yui 中的dom例子

<!DOCTYPE HTML PUBLIC "-//W#C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html" charset="utf-8"> <title>YUI Dom Utility Example 2</title> <link rel="stylesheet" type="text/css" href="../build/reset-fonts-grids/reset-fonts-grids.css" mce_href="build/reset-fonts-grids/reset-fonts-grids.css"> <link rel="stylesheet" type="text/css" href="../build/base/base.css" mce_href="build/base/base.css"> <mce:script type="text/javascript" src="../build/yahoo-dom-event/yahoo-dom-event.js" mce_src="build/yahoo-dom-event/yahoo-dom-event.js"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> #positions{ width:250px; border:2px solid black; padding:5px; } </style> <mce:script type="text/javascript"></mce:script> </head> <body> <div id="positions"> <h2 class="header">Positional Methods</h2> <p><span id="elemX">The X position of this div is: </span></p> <p><span id="elemY">The Y position of this div is: </span></p> <p>Move x to :<input type="text" id="moveX" /></p> <p>Move y to :<input type="text" id="moveY" /></p> <button id="move" type="button">Move this div!</button> </div> </body> </html>

YAHOO.util.Point类从region类继承而来，用于定义一个特殊区域，该区域在一个表格中表现出一个单独的点。她继承了region类中的所有属性，以及除.getRegion()外的所有方法。它自己本身没有方法，而且仅有两个属性，x和

y，也用不着多解释。YAHOO.util.Point只需要两个参数，点的位置X和Y。

事件监听 yui

有以下特点：

自动处理延迟-如果html元素上监听的事件没有马上被脚本找到，它会在页面加载完后延迟15秒使得元素有时间呈现。只有在监听函数中直接使用元素id才有效，而不是使用一个表示元素的变量。

自动纠错-event utility自动调整你的事件处理句柄，从而使this关键字总能指代到事件相关的dom对象,而不是window对象。这种现象经常发生在ie或非标准浏览器处理事件时。

兼容各浏览器-获取事件对象的属性是当前web设计另一个区域，在ie和其他浏览器重会存在大量的不兼容现象。yui通过以实际事件对象作为参数传递给回调函数的方式解决了这种不同。一系列的有效方法允许你很方便得获取事件对象的各种属性。

方便的事件句柄添加-对任何dom事件或客户端事件要添加的任何事件处理句柄可以添加到dom元素或一组元素。一种是使用字符串变量（也可以是一个数组）来表示dom元素（或一组元素）或者文字上的对应dom本身。

自动清除监听-当一个onunload事件被找到时，事件程序会自动尝试清除已经注册过的事件。使用_simpleRemove()和_unload()私有方法来清除。你也可以手动来清除事件，使用.removeListener()或者.purgeElement()方法。

当合适的时候再触发

通常使用最简单的方式添加onload事件，可能导致要使用的元素还未加载完毕却要触发事件。解决这问题的方法是，使用.onDomReady(),.onAvailabel()和.onContentReady()。他们相似，但仍有不同的地方。

.onDomReady()允许你在dom结构完成的时候执行代码。它比window对象的onload事件更有效。会在dom一完成就立马触发。

你也可以针对特定的元素使用.onAvailable()或.onContentReady()方法。这两种方法可以在dom中检测到指定元素时就执行代码。这两种语法和使用方法是相似的，但是.onContentReady()不会触发直到指定元素以及他们的兄弟结点都被检测到。

如果再页面中同时有window.οnlοad=onLoadHandler和onAvailable事件，在ie和ff中表现是不同的,在ie中先触发onload事件，在ff中则相反。

来看一下event类

在event程序中定义了五个类：

YAHOO.util.Event

提供定义事件处理回调函数以及监听的元素。

YAHOO.util.CustomEvent

处理你自己定义的非标准事件

YAHOO.util.EventProvider

触发事件以及用名字描述事件由其他函数（如元素函数）调用，来扩展事件功能。

YAHOO.util.KeyListener是个特殊的类，通过对键盘事件的监听单独处理。

YAHOO.util.Subscriber也是个特殊的类，来存储描述信息，当事件触发时使用。如calendar例子中myCal.selectEvent.subscribe(ripDate);

stopEvent()方法中结合了stopPropagation()和preventDefault()函数的功能，你可以方便的通过更小的代码来调用这两个有效的方法。stopPropagation停止事件冒泡，preventDefault()防止事件默认动作被浏览器自动运行。

自定义事件（custom event）

你可以使用自定义事件接口定义自己的事件。

animation模块有三个特殊的自定义事件，对于一个动画效果中的一些重要时刻定义事件，当开始时有onStart，结束时onComplete，在帧与帧之间过渡的onTween.

custom Event类

YAHOO.util.CustomEvent需要四个参数。第一是自定义事件的名称，第二个是可选的，设置事件触发的对象范围，可选的第三个参数是布尔值，允许或者防止事件写入debug系统（默认值是否）。最后第四个参数是个整行表示事件信号，会在自定义事件监听时用到。

fire()方法用于创建自定义事件触发时需要的回调函数。

subscribe()方法为你的自定义事件添加句柄。需要三个参数，第一个是自定义事件发生时要执行的函数，第二个可选，为穿个该函数的对象，第三个可选，可以是布尔或者对象类型。

如果为真，所传递的对象就会成为执行环境，如果为否，包含事件的对象会成为执行环境。上述三部完成后，你就可以建立添加事件了。

创建一个自定义事件

Even713

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
yui学习笔记（三）----dom和event

yui 中的dom例子 YUI Dom Utility Example 2  #positions{ width:250
复制链接

扫一扫