了解YUI三 试着了解作文初三

YUI之Event

YUI的Event包可以用来操纵DOM事件,也可以自定义事件。

1. 要使用Event,首先要引入YUI3的种子文件:
<scriptsrc="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
然后加载相应模块:

YUI().use('event',function(Y){

});


2. 设置事件响应函数:on()
有两个on方法,一个是YUI的,一个是Node的
Y.on("click", handleClick, "#foo p") 设置元素"#foop"的click事件处理函数为handleClick。
foo.on("click", handleClick) 的作用与上面的一样

对于YUI的on方法,参数如下:
1) 事件名。
2) 事件处理句柄
3) 元素,可以是多个,多个的写法是这样:["#foo p", "#bar"]
4) 上下文对象,即事件处理函数中的this,如果忽略,就是target元素的Node
5) 参数,可以有多个,按顺序为事件处理函数中event之后的参数

3. 移除事件响应函数
有三--种方式:
1) 在事件名前加前缀,然后用YUI的detach移除
2) 保存事件句柄,然后通过该句柄移除
3) 用YUI的detach,指定事件名、处理函数和元素

YUI().use('node-base',function(Y){

//aneventhandler:

functionhandleClick(e){

Y.log(e);

}

varfooHandle=Y.on("eventcatgory|click",handleClick,"#foo");

//第一种

Y.detach('eventcategory|click');

Y.detach('eventcategory|*');

//第二种

fooHandle.detach();

Y.detach(fooHandle);

//第三种

Y.detach("click",handleClick,"#foo");

});

另外,Event.purgeElement可以清理所有通过on添加的事件处理函数,而且可以设定是否对子元素递归清理。

4.模拟鼠标事件
可以通过Node.simulate()模拟鼠标事件,可以模拟7种鼠标事件:
*click
*dblclick
*mousedown
*mouseup
*mouseover
*mouseout
*mousemove
同时可以指定一些附加信息,例如:

YUI().use('node-event-simulate',function(Y){

Y.one("body").simulate("click",{shiftKey:true});

});


模拟按下Shift键的click事件,这些附加信息包括:
* detail -click的次数.
*screenX/screenY
*clientX/clientY
*ctrlKey/altKey/shiftKey/metaKey
* button -0:左,1:右, 2:中
*relatedTarget

5. 模拟键盘事件
可以模拟以下事件:
*keyup
*keydown
*keypress
keyup和keydown必须指定keyCode,keypress必须指定charCode,另外还可以指定ctrlKey,altKey, shiftKey和metaKey,以下是几个例子:
YUI().use('node-event-simulate',function(Y){

varnode=Y.one("#myDiv");

node.simulate("keydown",{keyCode:97});

//simulatetyping"a"

node.simulate("keypress",{charCode:97,altKey:true});

});

6.available(onAvailable)和contentready(onContentReady)事件
了解YUI【三】 试着了解作文初三
available事件在一个元素刚刚出现在DOM树中时触发。
contentready事件在一个元素和它的下一个元素都可以用getElementById获得
时触发,以保证该元素已加载完毕(除了动态加载的内容以外)

7. domready(onDOMReady)事件
domready事件在DOM树构建完成时触发,有可能是在图像加载完毕以前。

8. delegate方法
事件代理(Eventdelegate)机制可以在父元素处唯一绑定一个listener监听该
父元素的多个子元素处发生的事件,以如下的html为例:

<divid="container">

<ul>

<liid="item-1"><em>ItemTypeOne</em></li>

<liid="item-2"><em>ItemTypeTwo</em></li>

<liid="item-3"><em>ItemTypeThree</em></li>

</ul>

</div>


以下这段代码将一listener绑定到"container",却监听着其3个子元素(<li>)处的
click事件:

YUI().use("event-delegate",function(Y){

Y.delegate("click",function(e){

Y.log("Defaultscope:"+this.get("id"));

Y.log("Clickedlistitem:"+e.currentTarget.get("id"));

Y.log("Eventtarget:"+e.target);

Y.log("Delegationcontainer:"+e.container.get("id"));

},"#container","li");

});


9. focus和blur事件
DOM的focus和blur事件是不做冒泡传递的,但YUI的Event utility的focus和blur事件
却可以,因此可以实现集中的事件处理。
以下是一段示例代码:
YUI().use("event-focus",function(Y){

varhandle=Y.on("focus",function(e,arg1,arg2,etc){

Y.log("target:"+e.target+",arguments:"+arg1+","+arg2+","+etc);

},"#toolbar",Y,"arg1","arg2","etc");

});


其中"#toolbar"是一个包含3个按钮的<div>,如下:

<divid="toolbar">

<inputtype="button"id="button-cut"name="button-cut"value="Cut">

<inputtype="button"id="button-copy"name="button-copy"value="Copy">

<inputtype="button"id="button-paste"name="button-paste"value="Paste">

</div>

10. mouseenter和mouseleave事件
YUI也提供mouseenter和mouseleave事件,代码如下所示:

YUI().use("event-mouseenter",function(Y){

Y.on("mouseenter",function(e){

Y.log("Mouseentered:"+this.get("id"));

},"#container");

Y.on("mouseleave",function(e){

Y.log("Mouseleft:"+this.get("id"));

},"#container");

});

11. 自定义事件
可以使用on实现简单的自定义事件。注册listener是这样的:
Y.on('customapp:started',function(arg1,arg2,arg3){

Y.log('CustomAppStarted,nowIcandoaafewthings);

});


激发这个事件是这样的:
YUI().use('event-custom',function(Y){

Y.fire('customapp:started',1,2,3);

});


另外可以用augment将一对象提升为Event target,用publish定义一个Event,注册listener
还是用on,激发事件还是用fire,下面是示例代码:
YUI().use('event-custom',function(Y){

functionPublisher(){

this.publish("publisher:testEvent",{});

}

Y.augment(Publisher,Y.EventTarget,null,null,'test');

publisher=newPublisher();

publisher.on("publisher:testEvent",function(e){

alert(e);

});

publisher.fire("publisher:testEvent",'testarg1');

});

其中publish只有当需要覆盖默认配置时才需要。

  

爱华网本文地址 » http://www.aihuau.com/a/25101015/284317.html

更多阅读

怎样指导三年级学生写作文 三年级作文怎样辅导

作者:石小的一条鱼http://blog.sina.com.cn/stxxx2010小学生三年级作文就是把自己看到的、听到的、想到的内容和自己亲身经历的事情,经过自己的语言组织。用恰当的语言文字表达出来。小学三年级,就普遍感觉到写作文的困难,主要是因为学

转载 三年级第二学期作文指导:寒假里最难忘的一件事—

原文地址:三年级第二学期作文指导:寒假里最难忘的一件事——放烟花作者:方育龙三年级第二学期作文指导:寒假里最难忘的一件事——放烟花作者:方育龙教学目标:1、通过教学指导,让学生初步明白,记叙一件事,要写清楚事情的时间、地点、人

SP文训诫文 推荐,试着去学什么 女尊sp训诫文打男主

1.首推经典《支离-追寻》和《支离-游弋》里面一些训诫的话看了感触颇多,我都会学着去做2.差不多的还有红尘紫陌的《天下风雷》《年少天纵1931》《代人受过》《春怀》原来我看是民国的,不喜欢那段历史。但看了之后竟然还对那段历史

初三学生作文一组——那件小事激励着我 激励初三学生的视频

那件小事激励着我 初三七班 孔菲从那以后,我总是会告诉自己,没有什么不可能。初一英语成绩一直平平,成绩始终在中下徘徊。几次单元考试,都不理想,而更可怕的是,入学以来第一个重要的考试要来了。面对这考试,我心里一点儿谱都没有。这不,

三年级小学生的作文《我的新老师》 小学生三年级作文范文

新的学期开始了,我们已经三年级了。漫长的暑假中,不停地有老师发给我短消息,但我并不知道迎接我们的新老师叫什么,还以为我们还在一号恩玲楼上课。天渐渐凉了,新学期已跟在秋天的身后一步步地迈近了,虽然不是非常慌张,促不及防,但心头仍有

声明:《了解YUI三 试着了解作文初三》为网友寒玉簪秋水分享!如侵犯到您的合法权益请联系我们删除