Files
openlayers/master/examples/_Widget-on.html
Éric Lemoine 5d14b9e2d4 Updated
2013-02-20 10:38:25 +01:00

93 lines
2.4 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>_Widget on() test</title>
<style type="text/css">
@import "../themes/claro/document.css";
@import "../themes/claro/claro.css";
@import "css/dijitTests.css";
</style>
<script type="text/javascript" src="../../dojo/dojo.js"
data-dojo-config="isDebug: true"></script>
<script>
dojo.require("doh.runner");
dojo.require("dojo.parser");
dojo.require("dojo.on");
dojo.require("dojo._base.declare");
dojo.require("dijit._Widget");
dojo.require("dijit.registry");
dojo.ready(function(){
var mousedOver, clicked;
doh.register("on", [
function setup(){
dojo.declare("MyWidget", [dijit._Widget], {
postCreate: function(){
dojo.on(this.domNode, "click", dojo.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
}
});
dojo.parser.parse();
},
function connect(){
// This should work despite the fact that the function onMouseOver has
// multiple capital letters
dijit.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
dijit.registry.byId("myWidget").on("foobar", function(){
clicked = true;
console.log("click event");
});
},
function test(){
var myWidget = dijit.registry.byId("myWidget");
// Test that _Widget.on() catches click event
doh.f(clicked, "clicked");
dojo.on.emit(myWidget.domNode, "click", {
bubbles: true,
cancelable: true,
which: 1
});
doh.t(clicked, "clicked");
// Test that _Widget.on() catches mouseover event
doh.f(mousedOver, "mousedOver");
dojo.on.emit(myWidget.domNode, "mouseover", {
bubbles: true,
cancelable: true,
which: 1
});
doh.t(mousedOver, "mousedOver");
}
]);
doh.run();
});
</script>
</head>
<body class="claro">
<div id="myWidget" data-dojo-type="MyWidget">
mouseover and click events to console
</div>
</body>
</html>