<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html>
<head>
<title>Focus and Blur Event Test for Opera</title>
</head>
<body class="yui3-skin-sam">
<h1>Opera Focus and Blur Event Test</h1>
<h2>Background</h2>
<p>
By default the <code>focus</code> and <code>blur</code> events do not
bubble. This is problematic for developers wishing to listen for these
events via event delegation. Use of capture phase event listeners for
<code>focus</code> and <code>blur</code> is useful in that they enable
the use of these events when using event delegation.
</p>
<p>
Opera implements capture phase events per spec rather than
the more useful way it is implemented in other browsers:
The event doesn't fire on a target unless there is a
listener on an element in the target's ancestry. If a
capture phase listener is added only to the element that
will be the target of the event, the listener won't fire.
</p>
<p>
To work around the implementation of capture phase events in Opera,
the YUI3 Event Utility uses the <code>DOMFocusIn</code> and
<code>DOMFocusOut</code> events
rather than capture phase listeners for <code>focus</code> and
<code>blur</code>.
</p>
<h2>Using this Test</h2>
<p>
Use the keyboard or mouse to place focus into and the remove focus
from the following text box. You should see a log message appear
for each event in Opera.
</p>
<input type="text" id="text-1">
<script type="text/javascript">
YUI({
logExclude: {
Dom: true,
Selector: true,
Node: true,
attribute: true,
base: true,
event: true,
widget: true },
lazyEventFacade: true
}).use('console', 'node', 'event-focus', function (Y) {
(new Y.Console()).render();
var textBox = document.getElementById("text-1");
// The following standard capture phase focus and blur event
// listeners will not be called in Opera.
textBox.addEventListener("focus", function () {
Y.log("text-1 standard DOM capture phase focus listener called");
}, true);
textBox.addEventListener("blur", function () {
Y.log("text-1 standard DOM capture phase blur listener called");
}, true);
// The following YUI3 focus and blur event listeners WILL be
// called in Opera.
Y.on("focus", function () {
Y.log("focus listener called for text box!");
}, "#text-1");
Y.on("blur", function () {
Y.log("blur listener called for text box!");
}, "#text-1");
});
</script>
</body>
</html>