javascript委托(Delegate)blur和focus用法實例分析
更新時間：2015年05月26日 15:31:20 作者：憶夢
這篇文章主要介紹了javascript委托(Delegate)blur和focus用法,實例分析了javascript委托的用法及針對常見瀏覽器的使用技巧,需要的朋友可以參考下
本文實例講述了javascript委托(Delegate)blur和focus用法。分享給大家供大家參考。具體分析如下：
Opera (9.5b) 對于所有的focus和blur事件，不能正確的觸發(fā)兩次；
因此，focus和blur事件的處理函數可以被委派到事件的捕獲階段。
例子1（列表類）：
復制代碼 代碼如下:
<ol id="列表">
<li><a href="#">列表項1</a>
<ol>
<li><a href="#">列表項1.1</a></li>
<li><a href="#">列表項1.2</a></li>
<li><a href="#">列表項1.3</a></li>
</ol>
</li>
其他列表項
</ol>
<li><a href="#">列表項1</a>
<ol>
<li><a href="#">列表項1.1</a></li>
<li><a href="#">列表項1.2</a></li>
<li><a href="#">列表項1.3</a></li>
</ol>
</li>
其他列表項
</ol>
例子2（表單類）：
復制代碼 代碼如下:
<form id="表單">
<input type="text" id="文本框" />
其他表單項
</form>
<input type="text" id="文本框" />
其他表單項
</form>
這里我們監(jiān)聽的是最外層的ol區(qū)塊，如果我們用blur和focus事件，只是針對的是這整個的ol的，那么里面控件的focus和blur事件怎么處理呢？
處理方式如下：
IE處理:
復制代碼 代碼如下:
$('列表').onmouseover = handleMouseOver;
$('列表').onmouseout = handleMouseOut;
$('列表').onfocusin = handleMouseOver;
$('列表').onfocusout = handleMouseOut;
$('列表').onmouseout = handleMouseOut;
$('列表').onfocusin = handleMouseOver;
$('列表').onfocusout = handleMouseOut;
也可以寫成下面的形式:
復制代碼 代碼如下:
$('列表').attachEvent('onfocusout',handleMouseOut,true);
如果想要傳遞參數，可以加個中間函數，例如
復制代碼 代碼如下:
$('列表').attachEvent('onfocusout',function(event, myparams){handleMouseOut(event, myparams);},true);
FF處理:
復制代碼 代碼如下:
$('列表').addEventListener('focus',handleMouseOver,true);
$('列表').addEventListener('blur',handleMouseOut,true);
$('列表').addEventListener('blur',handleMouseOut,true);
希望本文所述對大家的javascript程序設計有所幫助。
您可能感興趣的文章:
- AngularJS ng-blur 指令詳解及簡單實例
- 老生常談onBlur事件與onfocus事件(js)
- jsp+ajax實現的局部刷新較驗驗證碼(onblur事件觸發(fā)較驗)
- Js中的onblur和onfocus事件應用介紹
- AngularJS Controller作用域
- JS 實現計算器詳解及實例代碼（一）
- JSP頁面跳轉方法小結
- 詳解js中==與===的區(qū)別
- js時間控件只顯示年月
- java后端把數據轉換為樹,map遞歸生成json樹,返回給前端(后臺轉換)
- 完美解決node.js中使用https請求報CERT_UNTRUSTED的問題
- JS實現iframe自適應高度的方法示例
- Javascript blur與click沖突解決辦法
- jsp頁面顯示數據庫的數據信息表
相關文章
對于js的一些常見事件的總結2008-12-12
這篇文章主要幫助大家簡單實現JavaScript彈幕效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了JavaScript實現選擇框按比例拖拉縮放的方法,具有等比例縮放及設置最小范圍等功能,涉及javascript事件的添加、監(jiān)聽、頁面元素動態(tài)操作及鼠標事件的響應等技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了ES6新增的數組知識,結合實例形式分析了ES6的數組新增知識點、使用技巧與相關注意事項,需要的朋友可以參考下2020-05-05
本篇文章主要介紹了bootstrap Table插件使用demo，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細介紹了JavaScript中數組隨機排序的實現，主要是利用原地算法和sort/shuffle算法，感興趣的小伙伴可以跟隨小編一起學習一下2022-11-11
下面小編就為大家?guī)硪黄獂code中獲取js文件的路徑方法(推薦)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要為大家詳細介紹了JavaScript使用面向對象編程實現煙花特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了微信小程序頁面滾動到指定位置代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
js通過googleAIP翻譯PHP系統(tǒng)的語言配置的實現代碼
一同事弄了個系統(tǒng)是php寫的，雖然是多語言但沒中文！他打算手動翻譯2000多個語言配置，真是佩服，知道后想了想，應該有好的法辦2011-10-10