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