dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
166 lines (141 loc) • 4.02 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>_WidgetBase on() test</title>
<script src="boilerplate.js"></script>
<script>
require([
"doh/runner",
"dojo/_base/declare", "dojo/has", "dojo/_base/lang", "dojo/on", "dojo/parser", "dojo/touch",
"dijit/registry", "dijit/_WidgetBase", "dojo/domReady!"
], function(doh, declare, has, lang, on, parser, touch, registry, _WidgetBase){
var mousedOver, clicked;
doh.register("on", [
function setup(){
declare("MyWidget", _WidgetBase, {
postCreate: function(){
on(this.domNode, "click", lang.hitch(this, "onFooBar"));
},
onFooBar: function(){
// This is called whenever the widget is clicked
},
foobar: function(){
// A widget.on("foobar") should go to onFooBar() (above), not here
}
});
parser.parse();
},
function connect(){
// This should work despite the fact that the function onMouseOver has
// multiple capital letters
registry.byId("myWidget").on("mouseover", function(){
mousedOver = true;
console.log("mouseover event");
});
// Likewise, this should work despite the fact that the function onFooBar has
// multiple capital letters
registry.byId("myWidget").on("foobar", function(){
clicked = true;
console.log("click event");
});
},
function test(){
var myWidget = registry.byId("myWidget");
// Test that _WidgetBase.on() catches click event
doh.f(clicked, "clicked");
on.emit(myWidget.domNode, "click", {
bubbles: true,
cancelable: true,
which: 1
});
doh.t(clicked, "clicked");
// Test that _WidgetBase.on() catches mouseover event
doh.f(mousedOver, "mousedOver");
on.emit(myWidget.domNode, "mouseover", {
bubbles: true,
cancelable: true,
which: 1
});
doh.t(mousedOver, "mousedOver");
},
function synthetic(){
// Test that on() works for synthetic events
var myWidget = registry.byId("myWidget"),
touched;
myWidget.on(dojo.touch.press, function(){
touched = true;
});
var eventType = has("pointer-events") ? "pointerdown" : has("MSPointer") ?
"MSPointerDown" : has("touch-events") ? "touchstart" : "mousedown",
target = myWidget.domNode;
if(document.createEvent && target.dispatchEvent){
// This branch needed or the test fails on iOS in dojo/on,
// because changedTouches[0] isn't defined.
var touch = {
identifier: (new Date()).getTime(),
target: target,
screenX: 0,
screenY: 0,
clientX: 0,
clientY: 0,
pageX: 0,
pageY: 0
};
var mouseEvent = document.createEvent("MouseEvent");
mouseEvent.initMouseEvent(
eventType,
true,
true,
target.ownerDocument.defaultView,
0,
0,
0,
0,
0,
false,
false,
false,
false,
0,
document.body // relatedTarget, for mouseout events
);
if(/touch/.test(eventType)){
mouseEvent['touches'] = [touch];
mouseEvent['targetTouches'] = [touch];
mouseEvent['changedTouches'] = [touch];
}
target.dispatchEvent(mouseEvent);
}else{
on.emit(myWidget.domNode, eventType, {
bubbles: true,
cancelable: true,
which: 1
});
}
doh.t(touched, "touched");
},
function syntheticNoCallbackArgs(){
var evt = null;
var MyWidget = declare(_WidgetBase, {
show: function(){
return this.emit('show');
},
onshow: function(e){
evt = e;
}
});
new MyWidget({}).show();
doh.isNot(null, evt, "onshow was called with event object");
}
]);
doh.run();
});
</script>
</head>
<body>
<div id="myWidget" data-dojo-type="MyWidget">
mouseover and click events to console
</div>
</body>
</html>