Yahoo!用戶界面博客（YUIBlog）

介紹的onfocus和onblur

早在今年4月，PPK撰寫博客條目“ 委託中，他提出了一個解決問題的重點和模糊事件 ，既沒有在任何瀏覽器中的重點或模糊事件的泡沫。 他的解決辦法（focus和blur登記捕捉階段的事件監聽器），是任何開發人員都希望避免從離散的重點和約束力，可聚焦元素的模糊事件處理程序，可能導致代碼膨脹和性能瓶頸的祝福。

我們喜歡 PPK的解決方案，決定回答他的電話，並在他的話說，“... ...這些可怕聰明的JavaScript librar [IES]使用這項技術 ... ...”，。 因此，對於2.6版，我們已經推出PPK的解決方案分為兩個事件實用程序的addFocusListener ： addBlurListener和addBlurListener （ onFocus onBlur onfocus和onblur ）。 這兩個新方法封裝了一些本質堅韌不拔的支持在我們所有的技術的A級瀏覽器，同時提供你addListener從糖addListener事件實用程序的方法。 這些新方法的簽名如下：

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

這兩種方法的參數如下：

EL

一個 ID，一個元素的引用，或ID和/或分配聽者的元素的集合。

FN

事件調用的方法。

OBJ

任意對象將作為參數傳遞給一個處理程序。

覆蓋

如果為 true覆蓋，通過在obj成為聽者的執行範圍。 如果一個對象，這個對象成為執行的範圍。

使用onfocus和onblur

這裡有幾種方法，我們已經取得了onFocus onfocus onBlur onblur銳2.6的方法：

提高業績的模式對話框

為了支持方式，對話框構件需要回本身直接關注的一個元素，不是它的一個孩子時接收焦點。 在此之前，這是完成註冊文檔中的每一個可聚焦元素的焦點事件偵聽器，當一個模態對話框是可見的，並消除這些偵聽器時，它被隱藏，被證明是昂貴和緩慢的過程。 使用PPK的技術，我們已經能夠提高50％以上，在大多數瀏覽器最初顯示一個模態對話框所花費的時間，並提高所花費的時間隱藏了90％以上的模態對話框。 為了測試，我們使用一個250頁可聚焦元素 。 下面是如何突破的數字為每個瀏覽器：

提高菜單鍵盤輔助

與WAI - ARIA最佳實踐菜單 ， 菜單部件使用的新onFocus方法在文檔級重點聽取，這樣，當一個彈出式菜單是隱藏的焦點，可以恢復到DOM中的元素，焦點之前，它是可見的。

在傳送帶焦點反饋

新的傳送帶部件的外觀包裝每個Next和Previous按鈕<input type="button">元素在<span> 。 關閉屏幕<input>元素，然後定位和背景圖像應用到每個<span> 。 雖然這種技術允許 Next和Previous按鈕，以保持與實際的下一個和上一個隱藏的按鈕關閉屏幕，屏幕閱讀器的用戶訪問，有遠見的用戶並沒有收到任何反饋，從任一按鈕時聚焦的UI。 為了解決這個問題，傳送帶使用onFocus方法適用於一類，突出重點提綱的按鈕到下一頁和上一頁按鈕。

當然，這些僅僅是我們使用的幾個onFocus onfocus onBlur onblur -我們認為這將證明，我們已經把它添加到我們的核心銳和銳為基礎的應用有用，使得它可用於任何應用程序基礎上YUI的事件工具上。

談話： bloglines | technorati

分享和擴展： 書籤del.icio.us | Digg它！ | 書籤交易！