dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
71 lines (67 loc) • 2.71 kB
HTML
<html id="html">
<head>
<title>NodeList.delegate() test</title>
<style type="text/css">
@import "../../resources/dojo.css";
</style>
<script type="text/javascript"
src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, popup: true"></script>
<script type="text/javascript">
dojo.require("dojox.NodeList.delegate");
dojo.addOnLoad(function(){
// Monitor onclick events on div.blue nodes, or that bubble up to div.blue nodes
dojo.query("div.delegator").delegate("div.blue", "onclick", function(evt){
// "this" points to the div.blue node
dojo.style(this, "backgroundColor", "#aaf");
});
dojo.query("div.delegator").delegate("input", "onfocus", function(evt){
// "this" points to the input node
console.log("bubbled input event");
dojo.style(this, "backgroundColor", "black");
});
// Generate div.blue nodes inside each wrapper div.
// Runs after the delegate() call to demonstrate that delegate() catches events on "future nodes"
dojo.query("div.wrapper").forEach(function(div){
for(var i=0; i<4; i++){
dojo.place(
"<div class=" + (i%2?"blue":"red") + ">" +
(i%2 && dojo.hasClass(div, "delegator") ? "click me to turn me blue" : "click will have no effect" )+
"<span>" + (i%2 && dojo.hasClass(div, "delegator") ? "or click me to turn parent blue" : "nor will a click here") + "</span>"+
"focus input to turn it black (not working yet): <input />" +
"</div>",
div
);
}
});
});
</script>
<style>
div, a { padding: 5px; margin: 5px; display: block; }
div.blue { border: blue solid 2px; }
div.red { border: red solid 2px; }
div.wrapper { border: solid gray 4px; background: #eee; }
div.delegator { background: #ccc; }
span { display: block; border: yellow solid 2px; }
</style>
</head>
<body id="body" class="classy">
<h1>Test of NodeList.delegate() method</h1>
<div class=blue style="border: 2px dotted black;">
<h3>
This DIV has class=blue but it shouldn't matter because the delegate() connections are on
sub node inside of me.
</h3>
<div class="wrapper delegator">
<h3>This div has a delegate handler on it so clicking the blue DIV's below will have an effect.</h3>
</div>
<div class="wrapper delegator">
<h3>This div has a delegate handler on it so clicking the blue DIV's below will have an effect.</h3>
</div>
<div class="wrapper">
<h3>This div doesn't have a delegate handler on it so clicking the blue DIV's below will have no effect.</h3>
</div>
</div>
</body>
</html>