Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<head>
<title id='desc'> WheelEvent: wheel Event capturing/bubbling </title>
<script type="text/javascript">
var PassTest = function()
{
document.getElementById("testresult").firstChild.data = "PASS";
}
var FailTest = function()
{
document.getElementById("testresult").firstChild.data = "FAIL";
}
function TestBubble(evt)
{
if (EVENT == evt.type)
{
ActualResult.push(evt.currentTarget);
}
if ((3 == evt.eventPhase) && (window === evt.currentTarget))
{
if (ExpectResult.toString() == ActualResult.toString())
{
PassTest();
}
else
{
FailTest();
}
for (var i=0; i < CURRENTTARGETS.length; i++)
{
CURRENTTARGETS[i].removeEventListener(EVENT, TestBubble, true);
CURRENTTARGETS[i].removeEventListener(EVENT, TestBubble, false);
}
}
}
var EVENT = "wheel";
var TARGET, PARENT, CURRENTTARGETS;
var ExpectResult = [];
var ActualResult = [];
window.onload = function()
{
try
{
TARGET = document.getElementById("target");
PARENT = document.getElementById("parent");
CURRENTTARGETS = [window, document, document.body, PARENT, TARGET];
ExpectResult = CURRENTTARGETS + "," + CURRENTTARGETS.reverse();
for (var i=0; i < CURRENTTARGETS.length; i++)
{
CURRENTTARGETS[i].addEventListener(EVENT, TestBubble, true);
CURRENTTARGETS[i].addEventListener(EVENT, TestBubble, false);
}
}
catch(ex)
{
FailTest();
}
}
</script>
</head>
<body>
<h3>DOM Events</h3>
<h4>
Test Description: WheelEvent - wheel event bubbles.
</h4>
<span id="parent">
<textarea id="target" rows="5" cols="30">TOP TOP TOP TOP TOP TOP TOP Scroll mouse wheel over here Scroll mouse wheel over here Scroll mouse wheel over here Scroll mouse wheel over here Scroll mouse wheel over here END END END END END END END </textarea>
</span>
<p id="manualsteps">
Steps:
<ol>
<li> Note: an input device with scroll wheel support (e.g., mouse wheel) is required
<li> Move the mouse pointer over the above textarea
<li> Scroll down the mouse wheel 1 or more units
</ol>
</p>
<p>Test passes if the word "PASS" appears below after following the above steps.</p>
<div>Test result: </div>
<div id='testresult'>FAIL</div>
</body>
</html>