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这篇博客以后 ,就开始设计自己的代码,其实很多解释都是在我的代码里,所以就 ...
随机推荐
- 浅谈IT
在没有学计算机应用技术之前我对IT的认知度几乎为零,曾经还天真的认为IT就是白领,只要做上IT行业,以后便可高枕无忧.后来阴差阳错学了这个专业.通过一年的学习,虽然学艺不精但多少对IT行业了解的一知半 ...
- 【BZOJ】【1044】【HAOI2008】木棍分割
二分/DP 真是一道好题! 第一问很简单的二分…… 第二问一开始我想成贪心了,其实应该是DP的= = 然后没有注意……又MLE又TLE的……这题要对DP进行时空两方面的优化!! 题解:(by JoeF ...
- 【BZOJ】【3550】【ONTAK2010】Vacation
网络流/费用流 Orz太神犇了这题…… 我一开始想成跟Intervals那题一样了……每个数a[i]相当于覆盖了(a[i]-n,a[i]+n)这个区间……但是这样是错的!!随便就找出反例了……我居然还 ...
- vitrualbox虚拟机64位安装报错解决
1 NtCreateFile(\Device\VBoxDrvStub) failed: 0xc0000034 STATUS_OBJECT_NAME_NOT_FOUND (0 retries) 解决办法 ...
- redis 数据库维护之 key 大小获取
获得 redis key 大小 redis 用过一段时间后,发现一个KEY每天需更新值,但总是更新不全,故此为了定位问题,整理此脚本,辅助监控一下 写了两个脚本 注意:需要提前从 https://gi ...
- http authorization basic请求代码示例
/** * */ package testJava.java; import java.io.BufferedReader; import java.io.InputStream; import ja ...
- 高德地图根据经纬度转换成地址JS代码demo
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- javascript实现KMP算法(没啥实用价值,只供学习)
简单粗暴上代码 KMP的原理我就不讲了,想转过弯儿来不容易,建议大家先学会了怎么推导出next数组规律,然后准备两张纸,大纸上写上一行你要匹配的目标字符串,并分别写出位置编号,小纸上写上一行,也写上位 ...
- Java中List、Set和Map的区别--转载
List按对象进入的顺序保存对象,不做排序或编辑操作.Set对每个对象只接受一次,并使用自己内部的排序方法(通常,你只关心某个元素是否属于Set,而不关心它的顺序--否则应该使用List).Map同样 ...
- 用ScriptEngine在java中和javascript交互的例子(JDK6新特性)
package demo7; import java.util.Arrays; import java.util.List; import javax.script.Invocable; import ...