Yahoo! User Interface Blog (YUIBlog)

Introducing onfocus und onblur

7. Oktober 2008 um 10:58 Uhr von Todd Kloots | In Barrierefreiheit , Entwicklung | Keine Kommentare

Bereits im April, verfasst PPK ein Blog-Eintrag mit dem Titel Delegieren der Schärfe und Unschärfe Ereignisse , in denen er schlug eine Lösung für das Problem, dass weder der Fokus oder die blur Ereignisse Blase in jedem Browser. Seine Lösung (Registrierung capture-Phase Ereignis-Listener für Schärfe und Unschärfe) ist ein Segen für jeden Entwickler wollen den Code aufblähen und Performance-Engpass, der aus bindenden diskrete Schärfe und Unschärfe Ereignishandler für fokussierbare Elemente führen kann, zu vermeiden.

Uns gefiel PPK-Lösung und beschloss, seinen Anruf anzunehmen und zu sein, in seinen Worten, "... eine dieser furchtbar klug JavaScript librar [ies zu] nutzen diese Technik ...". : Also, für Version 2.6 haben wir PPK-Lösung in zwei Verfahren des Event-Dienstprogramm gerollt addFocusListener und addBlurListener (oder onFocus und onBlur für kurz). Diese beiden neuen Methoden kapseln die Nitty Gritty unterstützen diese Technik in allen unseren A-Grade-Browser und bietet gleichzeitig den Zucker, die Sie von dem erwartet habe addListener Methode des Event-Utility. Die Signaturen dieser neuen Methoden sind wie folgt:

onFocus(el, fn, obj, override)
oBlur(el, fn, obj, override)

Die Argumente für beide Verfahren sind wie folgt:

el

Eine ID, ein Element, Verweis oder eine Sammlung von IDs und / oder Elemente, um die Zuhörer zu übertragen.

fn

Die Methode der Veranstaltung aufruft.

obj

Ein beliebiges Objekt, das wird als Parameter an den Handler übergeben werden.

überschreiben

überschreiben Wenn das stimmt, wird der obj bestanden in der Ausführung Umfang des Zuhörers. Wenn ein Objekt, wird dieses Objekt die Ausführung Umfang.

Mit onfocus und onblur

Hier sind mehrere Möglichkeiten, wie wir den Einsatz der neuen gemacht habe onFocus und onBlur Methoden in YUI 2.6:

Verbessern der Leistung von modalen Dialogen

Um Modalität zu unterstützen, muss ein Dialog-Widget, um den Fokus wieder auf sich selbst lenken, wenn ein Element, das nicht eines seiner Kinder den Fokus erhält. Früher wurde dies durch die Registrierung Schwerpunkt Event-Listener auf jedem fokussierbare Element im Dokument, wenn ein modales Dialogfeld sichtbar gemacht wurde, und die Beseitigung jener Zuhörer, wenn es versteckt war, einen Prozess, der zu teuer und zu langsam erwies erreicht. Mit PPK-Technik konnten wir den Zeitaufwand für die Anzeige zunächst einen modalen Dialog um über 50% in den meisten Browsern, und steigern Sie die Zeit es braucht, um einen modalen Dialog um über 90% steigern zu verstecken. Um zu testen, verwendeten wir eine Seite mit 250 fokussierbare Elemente . Hier ist, wie die Zahlen ausbrechen für jeden Browser:

Zeit (in Millisekunden), um zunächst ein modales Dialog-Widget auf einer Seite mit 250 fokussierbare Elemente in YUI 2.5.2 und YUI 2.6.0

Browser	YUI 2.5.2	YUI 2.6.0	% Schneller
FF 3 Mac OS 10.4	245	107	56
FF 3 Win XP	158	88	44
FF 2 Mac OS 10.4	368	161	56
FF 2 Win XP	320	131	59
Opera 9.5 Mac OS 10.4	103	93	10
Opera 9.5 Win XP	71	60	15
IE 7	200	70	65
IE 6	220	121	45
Safari 3.1	53	18	66

Zeit (in Millisekunden), um einen modalen Dialog-Widget auf einer Seite verstecken mit 250 fokussierbare Elemente in YUI 2.5.2 und YUI 2.6.0

Browser	YUI 2.5.2	YUI 2.6.0	% Schneller
FF 3 Mac OS 10.4	65	1	98
FF 3 Win XP	57	1	98
FF 2 Mac OS 10.4	198	2	99
FF 2 Win XP	221	0	100
Opera 9.5 Mac OS 10.4	531	1	100
Opera 9.5 Win XP	380	0	100
IE 7	381	30	92
IE 6	371	40	89
Safari 3.1	48	1	98

Die Verbesserung Menü Tastatureingabehilfen

Im Einklang mit den WAI-ARIA Best Practices für die Menüs , die Menü-Widget verwendet die neue onFocus Methode zur Fokussierung auf Dokumentebene zu hören, so dass, wenn ein Popup-Menü ausgeblendet Fokus auf das Element im DOM, das den Fokus hatte wiederhergestellt werden können bevor es sichtbar gemacht.

Die Bereitstellung Fokus Feedback im Karussell

Die neuen Karussell Widget Skins ihren Schaltflächen Weiter und Zurück durch das Einwickeln jeweils <input type="button"> Elemente in einem <span> . Die <input> Elemente werden dann außerhalb des Bildschirms positioniert und ein Hintergrund-Bild wird auf jeden angewandt <span> . Während diese Technik lassen sich die Schaltflächen Weiter und Zurück bleiben zugänglich für Nutzer von Screenreadern, den tatsächlichen Schaltflächen Weiter und Zurück aus dem Bild versteckt, nicht sehende Benutzer erhält keine Rückmeldung aus dem UI-Taste, wenn entweder fokussiert wird. Um dieses Problem zu beheben, verwendet das Karussell onFocus Methode, um eine Klasse zu den Schaltflächen Weiter und Zurück-Tasten, die konzentriert hebt mit einem Abriss beantragen.

Natürlich sind dies nur wenige Orte, an denen wir gearbeitet haben onFocus und onBlur - wir denken, es wird sich so nützlich in YUI und in YUI-basierte Anwendungen, dass wir es auf unserem Core hinzugefügt, so dass es für jede Anwendung verfügbar Sie bauen auf der Oberseite des YUI Event-Utility.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!