focusblur-opera.html revision 85e08d7420a5c71ffdd9517a3179d29b9a32b1df
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
0c27b3fe77ac1d5094ba3521e8142d9e7973133fMark Andrews <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont <title>Focus and Blur Event Test for Opera</title>
2eeb74d1cf5355dd98f6d507a10086e16bb08c4bTinderbox User <script type="text/javascript" src="/build/yui/yui.js"></script>
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt By default the <code>focus</code> and <code>blur</code> events do not
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont bubble. This is problematic for developers wishing to listen for these
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont events via event delegation. Use of capture phase event listeners for
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont <code>focus</code> and <code>blur</code> is useful in that they enable
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont the use of these events when using event delegation.
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont Opera implements capture phase events per spec rather than
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont the more useful way it is implemented in other browsers:
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont The event doesn't fire on a target unless there is a
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont listener on an element in the target's ancestry. If a
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont capture phase listener is added only to the element that
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont will be the target of the event, the listener won't fire.
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont To work around the implementation of capture phase events in Opera,
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont the YUI3 Event Utility uses the <code>DOMFocusIn</code> and
19c7b1a0293498a3e36692c59646ed6e15ffc8d0Tinderbox User rather than capture phase listeners for <code>focus</code> and
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont Use the keyboard or mouse to place focus into and the remove focus
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt from the following text box. You should see a log message appear
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont for each event in Opera.
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt filter: 'debug',
30eec077db2bdcb6f2a0dc388a3cdde2ede75ec1Mark Andrews combine: false,
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont useConsole: true,
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont logExclude: {
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont deprecated: 1,
f1a2709aad7baa4161fdb6f63edf99b0150af252Evan Hunt Selector: true,
f1a2709aad7baa4161fdb6f63edf99b0150af252Evan Hunt attribute: true,
14a656f94b1fd0ababd84a772228dfa52276ba15Evan Hunt widget: true }
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont }).use('console', 'node', 'event-focus', function (Y) {
30eec077db2bdcb6f2a0dc388a3cdde2ede75ec1Mark Andrews (new Y.Console()).render("#console-container");
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont var textBox = document.getElementById("text-1");
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont // The following standard capture phase focus and blur event
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont // listeners will not be called in Opera.
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont textBox.addEventListener("focus", function () {
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont Y.log("text-1 standard DOM capture phase focus listener called");
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont textBox.addEventListener("blur", function () {
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont Y.log("text-1 standard DOM capture phase blur listener called");
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont // The following YUI3 focus and blur event listeners WILL be
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont // called in Opera.
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont Y.on("focus", function () {
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont Y.log("focus listener called for text box!");
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont }, "#text-1");
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont Y.on("blur", function () {
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont Y.log("blur listener called for text box!");
a631b30b1ddd8b2ea780371d0d99ba1c05bc7e42Francis Dupont }, "#text-1");