mouseenter.html revision b402e20da315b3e86bd6e770942e07d182bcba1d
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html lang="en">
<head>
<title>MouseEnter and MouseLeave Event Tests</title>
.container {
background-color: #ccc;
padding: 20px;
margin: 10px 0;
border-width: 1px;
border-style: solid;
border-color: #ccc;
}
background-color: #fc0;
}
.container ul {
list-style: none;
padding: 10px;
margin: 0;
background-color: #333;
}
.container ul li {
margin: 10px;
padding: 1px;
background-color: #999;
border-width: 1px;
border-style: solid;
border-color: #999;
}
.container ul li.hover {
background-color: #ff6;
}
.container ul li em {
display: block;
margin: 10px;
padding: 5px;
background-color: #666;
}
.outline,
.container ul li.outline {
border-color: #f00;
}
background-color: blue;
}
</style>
<!--script src="/sand/delegate_leak_files/heapsize.js"></script-->
<!--script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui.js"></script-->
<script type="text/javascript">
YUI({
//base: '/build/',
filter: 'raw'
}).use('event-custom', 'event', 'node-style', function (Y) {
/*
var count = 0;
Y.one = (function (original) {
return function () {
count++;
return original.apply(Y, arguments);
};
})(Y.one);
*/
//var memsnap = trackMemory(Y);
var onContainerMouseEnter = function (event) {
if (event.currentTarget == this) {
this.addClass("hover");
}
};
var onContainerMouseLeave = function (event) {
if (event.currentTarget == this) {
this.removeClass("hover");
}
};
var onLIMouseEnter = function (event) {
if (event.container.get("id") == "container-1") {
this.addClass("hover");
}
};
var onLIMouseLeave = function (event) {
if (event.container.get("id") == "container-1") {
this.removeClass("hover");
}
};
var addContainerOutline = function (event, className) {
event.currentTarget.addClass(className);
};
var removeContainerOutline = function (event) {
};
var addLIOutline = function (event, className) {
event.currentTarget.addClass(className);
};
var removeLIOutline = function (event) {
};
var setLIColor = function (event) {
this.setStyle("color", "#fff");
};
var removeLIColor = function (event) {
this.setStyle("color", "");
};
var handle1 = Y.on("mouseenter", onContainerMouseEnter, "#container-1");
var handle2 = Y.on("mouseleave", onContainerMouseLeave, "#container-1");
var handle3 = Y.on("mouseenter", addContainerOutline, "#container-1", Y, "outline");
var handle4 = Y.on("mouseleave", removeContainerOutline, "#container-1", "outline");
var handle5 = Y.on("mouseenter", setLIColor, "#container-1 li");
var handle6 = Y.on("mouseleave", removeLIColor, "#container-1 li");
var handle7 = Y.delegate("mouseenter", onLIMouseEnter, "#container-1", "li");
var handle8 = Y.delegate("mouseleave", onLIMouseLeave, "#container-1", "li");
var handle9 = Y.delegate("mouseenter", addLIOutline, "#container-1", "li", Y, "outline");
var handle10 = Y.delegate("mouseleave", removeLIOutline, "#container-1", "li", "outline");
Y.on("click", function () {
}, "#remove-listeners");
document.getElementById('memsize').onclick = function () {
//memsnap();
//console.log(count);
};
});
</script>
</head>
<body>
<h1>MouseEnter and MouseLeave Event Tests</h1>
<ul>
<li>The background color of the <code>div</code> element should turn
orange and have a red outline when you move the mouse over it.</li>
<li>The background color of each <code>li</code> should change to yellow
when you mouse over it and have a red outline.</li>
</ul>
<div id="container-1" class="container">
<ul id="ul-1">
<li id="li1">
<p><span>This</span></p>
<p><em>is</em></p>
<p><strong>a</strong></p>
<p><q>bunch</q></p>
<blockquote><p>of</p></blockquote>
<div>
<div>
<div>
<div>
<p>paragraphs</p>
</div>
</div>
</div>
</div>
<em id="em1">Item Type One</em>
</li>
<li id="li2"><em id="em2">Item Type Two</em></li>
<li id="li3"><em id="em3">Item Type Three</em></li>
</ul>
</div>
<button id="remove-listeners">Remove Listeners</button>
<button id="memsize">Check memory</button>
</body>
</html>