Yahoo! Blog User Interface (YUIBlog)

Apresentando onFocus e onBlur

07 de outubro de 2008 às 10:58 por Kloots Todd | No Acessibilidade , Desenvolvimento | No Comments

Em abril, PPK autor de um blog intitulado Delegando o foco e desfoque eventos em que ele propôs uma solução para o problema que nem o foco ou tremido bolha eventos em qualquer navegador. Sua solução (registrar ouvintes de eventos de captura de fase para o foco e desfoque) é uma benção para qualquer desenvolvedor que deseje evitar o inchaço de código e afunilamento de desempenho que pode resultar de foco e desfoque discreta ligação manipuladores de eventos para elementos focusable.

Gostamos solução PPK e decidiu responder ao seu chamado e ser, em suas palavras, "... um daqueles espantosamente inteligente JavaScript librar [s para] usar essa técnica ...". Assim, para a versão 2.6 que já rolou a solução PPK em dois métodos de utilitário do evento: addFocusListener e addBlurListener (ou onFocus e onBlur para o short). Estes dois novos métodos de encapsular o âmago da questão, de apoiar esta técnica em todos os navegadores-Classe A , ao entregar o açúcar que temos vindo a esperar do addListener método do Utilitário do evento. As assinaturas destes novos métodos são os seguintes:

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

Os argumentos para ambos os métodos são os seguintes:

el

Um id, um elemento de referência, ou um conjunto de identificações e / ou elementos para atribuir o ouvinte.

fn

O método chama o evento.

obj

Um objeto arbitrários que serão passados como um parâmetro para o manipulador.

substituir

substituir Se verdadeiro, o obj passado torna-se o escopo de execução do ouvinte. Se um objeto, este objeto torna-se o escopo de execução.

Usando onFocus e onBlur

Aqui estão algumas maneiras que fizemos uso das novas onFocus e onBlur métodos YUI 2.6:

Melhorando a performance das caixas de diálogo modais

Para apoiar a modalidade, um elemento de diálogo precisa direcionar o foco volta para si mesmo quando um elemento que não é um de seus filhos recebe o foco. Anteriormente, esta foi realizada por registrar ouvintes de eventos focar cada elemento focusable no documento quando uma caixa de diálogo modal se tornou visível, e removendo os ouvintes quando ele estava escondido, um processo que provou ser caro e lento. Usando a técnica de PPK, nós temos sido capazes de impulsionar o tempo que leva para exibir inicialmente uma caixa de diálogo modal mais de 50% na maioria dos navegadores, e aumentar o tempo que leva para esconder uma caixa de diálogo modal de mais de 90%. Para testar, usamos uma página com 250 elementos focusable . Aqui está como os números de sair para cada navegador:

Tempo (em milissegundos) para exibir inicialmente um widget de diálogo modal em uma página com 250 elementos focusable em YUI YUI 2.5.2 e 2.6.0

Browser	YUI 2.5.2	YUI 2.6.0	% Mais rápido
FF 3 Mac OS 10,4	245	107	56
FF 3 Win XP	158	88	44
FF 2 Mac 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

Tempo (em milissegundos) para ocultar um elemento de diálogo modal em uma página com 250 elementos focusable em YUI YUI 2.5.2 e 2.6.0

Browser	YUI 2.5.2	YUI 2.6.0	% Mais rápido
FF 3 Mac OS 10,4	65	1	98
FF 3 Win XP	57	1	98
FF 2 Mac 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

Melhorar a acessibilidade do teclado Menu

De acordo com a WAI-ARIA Melhores Práticas para menus , o widget Menu usa o novo onFocus método para escutar o foco no nível do documento, de modo que quando um popup menu está escondido o foco pode ser restaurado para o elemento do DOM que tinha o foco antes que ele se tornou visível.

Fornecendo Feedback Foco em carrossel

O novo carrossel widget peles e seus botões anterior seguinte, envolvendo cada <input type="button"> elementos em uma <span> . O <input> elementos são, então, posicionado fora da tela e uma imagem de fundo é aplicado a cada <span> . Ainda que esta técnica permite que os botões próximo e anterior a permanecer acessível aos utilizadores de leitores de tela, com os botões próximo e real oculto anterior fora da tela, os usuários deficientes visuais não receber qualquer feedback da interface do usuário quando um botão é focada. Para corrigir esse problema, Carrossel usa o onFocus método para aplicar uma classe para o anterior e botões ao lado que destaca focado botões com um esboço.

Naturalmente, estes são apenas alguns dos locais onde usamos onFocus e onBlur - nós achamos que vai provar ser tão útil em YUI e aplicativos baseados em YUI que nós adicionamos à nossa Core, tornando-o disponível para qualquer aplicativo construir em cima de Utilidade YUI evento.

Pesquisar conversas: Bloglines | technorati

Compartilhe e ampliar: Bookmark com del.icio.us | digg it! | reddit!