DOJO 八 event dojo/on
官网教程:Events with Dojo
在元素上绑定events,需要引用包dojo/on,通过on方法来实现。
<
button
id
=
"myButton"
>Click me!</
button
>
<
div
id
=
"myDiv"
>Hover over me!</
div
>
require([
"dojo/on"
,
"dojo/dom"
,
"dojo/dom-style"
,
"dojo/mouse"
,
"dojo/domReady!"
],
function
(on, dom, domStyle, mouse)
{
var
myButton =
dom.byId(
"myButton"
),
myDiv =
dom.byId(
"myDiv"
);
on(myButton,
"click"
,
function
(evt){
domStyle.set(myDiv,
"backgroundColor"
,
"blue"
);
});
on(myDiv, mouse.enter,
function
(evt){
domStyle.set(myDiv,
"backgroundColor"
,
"red"
);
});
var handler =
on(myDiv, mouse.leave,
function
(evt){
domStyle.set(myDiv,
"backgroundColor"
,
""
);
});
handler.remove();//移除event
on.once(
myDiv,
mouse.leave,
function
(evt){
domStyle.set(myDiv,
"backgroundColor"
,
""
);
});
});
on方法不需要前缀。包括三个参数。
第一个:需要绑定events的元素
第二个:event名称
第三个:处理event的方法体,这个方法体有只一个参数,为event的对象,包括一些属性和方法,如果需要传递其他参数,将在后面讲到。
方法on的返回值是一个简单的对象,只有一个remove方法,执行这个方法,元素就会移除这个event。
还有一个方法on.once(element,event
name,handler),参数同on一样,这个方法顾名思义就是只执行一次,在执行了handler后将会自动remove。
一个元素可以绑定多个events,每个event按照绑定的
先后顺序来
执行的。
----------------------------------
require([
"dojo/on"
,
"dojo/dom"
,
"dojo/_base/lang"
,
"dojo/domReady!"
],
function
(on, dom, lang) {
var
myScopedButton1 =
dom.byId(
"myScopedButton1"
),
myScopedButton2 =
dom.byId(
"myScopedButton2"
),
myObject = {
id:
"myObject"
,
onClick:
function
(arg){
alert(
"The scope of
this handler is "
+ this.id + " , value = " +
arg
);
}
};
// This will alert
"myScopedButton1"
on(myScopedButton1,
"click"
, myObject.onClick);
// This will alert "myObject" rather than
"myScopedButton2"
on(myScopedButton2,
"click"
, lang.hitch(myObject,
"onClick",
"something"
));
});
handler可以是一个方法体,也可以是一个对象里定义的方法,这个方法可以带多个参数。
如果handler表示为object.method,那么无法传递参数,而method中的this指代的是当前的元素。
如果handler用方法lang.hitch(object,method
name,[arg1,[arg2,.....]])来表示,则可能传递N个参数,但method中的this指代的是object。
define(["dojo/aspect"], function(aspect){
aspect.after(dojo, "xhr", function(deferred){
// this is called after any dojo.xhr call
});
// this will execute the original dojo.xhr method and then our advising function
dojo.xhr("GET", {...});
});
define(["dojo/aspect"], function(aspect){
aspect.before(dojo, "xhr", function(method, args){
// this is called before any dojo.xhr call
if(method == "PUT"){
// if the method is PUT, change it to a POST and put the method in the parameter string
args.url += "?x-method=PUT";
// return the new args
return ["POST", args];
}
});
// this will execute the original our advising function and then dojo.xhr
dojo.xhr("PUT", {...});
});
define(["dojo/aspect"], function(aspect){
aspect.around(dojo, "xhr", function(originalXhr){
return function(method, args){
// doing something before the original call
var deferred = originalXhr(method, args);
// doing something after the original call
return deferred;
}
});
dojo.xhr("PUT", {...});
});
DOJO 八 event dojo/on的更多相关文章
- Dojo API中文 Dojo内容模块概览,初学者
官网:http://dojotoolkit.org/reference-guide/1.10/dojo/index.html#dojo-dojo的翻译 dojo 内容: dojo dojo/dojo ...
- Dojo初探之4:dojo的event(鼠标/键盘)事件绑定操作(基于dojo1.11.2版本)
前言: 上一章详解了dojo的dom/query操作,本章基于dom/query基础上进行事件绑定操作 dojo的事件 dojo的事件绑定操作分为鼠标和键盘两种进行详解 1.鼠标事件 我们沿用上一章中 ...
- dojo.byId、dojo.query、dojo.attr
概述: dojo.byId(/*string*/id或/*DomNode*/node) 1.传入DOMNode返回传入的domNode; 2.传入id返回id为当前值的domNode dojo.que ...
- dojo 官方翻译 dojo/_base/lang 版本1.10
官方地址:http://dojotoolkit.org/reference-guide/1.10/dojo/_base/lang.html#dojo-base-lang 应用加载声明: require ...
- Dojo入门:dojo中的事件处理
JS为DOM添加事件 在原生的环境下,为DOM添加事件处理函数有多种方法: <input type="button" name="btn" value ...
- dojo.publish 和 dojo.subscribe
原文链接:http://www.cnblogs.com/didi/archive/2010/06/13/1757894.html //dojo.publish 和 dojo.subscribe :d ...
- dojo 十 ajax dojo/_base/xhr
官方教程:Ajax with DojoAjax功能:1.从服务器加载静态数据2.从web服务中访问xml或json类型的数据3.将表单(form)数据发送到服务器4.刷新页面内容....Ajax在RI ...
- dojo 九 effects dojo/_base/fx 和 dojo/fx
官方教程:Dojo Effects这里讲学习一下dojo如何实现淡入.淡出.滑动等效果.实现这些特殊的效果有两个包 dojo/_base/fx 和 dojo/fx.dojo/_base/fx 中提供了 ...
- dojo.js --dojo Quick Start/dojo入门手册1
我看了http://www.cnblogs.com/mylem/archive/2009/11/11/1600984.html这篇博客以后 ,就开始设计自己的代码,其实很多解释都是在我的代码里,所以就 ...
随机推荐
- 4.C#基础篇-->变量
一.前言 变量的类型划分即内存中的存放位置如图: 变量的生命周期如图:
- 使用IntersectionObserver更高效的监视某个页面元素是否进入了可见窗口
比如说,你想跟踪 DOM 树里的一个元素,当它进入可见窗口时得到通知. 也许想实现即时延迟加载图片功能,或者你需要知道用户是否真的在看一个广告 banner. 你可以通过绑定 scroll 事件或者用 ...
- ASP.NET MVC学习之视图篇(1)
一.前言 不知道还有多少读者从第一篇开始一直学习到如今,笔者也会一直坚持将ASP.NET MVC的学习完美的结束掉,然后开始写如何配合其他框架使用ASP.NET MVC的随笔.当然笔者后面的随笔如果没 ...
- bzoj 2821 分块处理
大题思路就是分块,将n个数分成sqrt(n)个块,然后 处理出一个w数组,w[i,j]代表第i个块到第j个块的答案 那么对于每组询问l,r如果l,r在同一个块中,直接暴力做就行了 如果不在同一个块中, ...
- 【BZOJ】【3205】【APIO2013】机器人robot
斯坦纳树 好神啊……Orz zyf && PoPoQQQ 为啥跟斯坦纳树扯上关系了?我想是因为每个点(robot)都沿着树边汇到根的时候就全部合起来了吧= =这个好像和裸的斯坦纳树不太 ...
- short-path problem (Dijkstra) 分类: ACM TYPE 2014-09-01 23:51 111人阅读 评论(0) 收藏
#include <cstdio> #include <iostream> #include <cstring> using namespace std; cons ...
- [百度空间] [原] Empty base class optimization
最近遇到了一个诡异的问题, 数组的数据不对, 最后发现是两个类型的大小不一样导致的. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
- ASP.NET运行机制之一般处理程序(ashx)
一. 概述 新建一个ashx文件 代码如下 <%@ WebHandler Language="C#" Class="TestHandler" %> ...
- java EE 5 Libraries 删掉后怎么重新导入
(1)Add Library 中 MyEclipse Libraries (2)输入 java 即可找到 问题解决.
- Windows 代码实现关机(直接黑屏)
整理资料的时候发现的以前的代码,本机Win7 x64 Sp1 运行直接关机,黑屏.就是利用RtlAdjustPrivilege函数提权,代码中的注释写的很详细了.用的VS2010写的,直接编译成x64 ...