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事件的處理函數(shù)可以被委派到事件的捕獲階段。

例子1（列表類）：

復(fù)制代碼代碼如下:

<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>

例子2（表單類）：

復(fù)制代碼代碼如下:

<form id="表單">

  <input type="text" id="文本框" />

  其他表單項

</form>

這里我們監(jiān)聽的是最外層的ol區(qū)塊，如果我們用blur和focus事件，只是針對的是這整個的ol的，那么里面控件的focus和blur事件怎么處理呢？

處理方式如下：

IE處理:

復(fù)制代碼代碼如下:

$('列表').onmouseover = handleMouseOver;

$('列表').onmouseout = handleMouseOut;

$('列表').onfocusin = handleMouseOver;

$('列表').onfocusout = handleMouseOut;

也可以寫成下面的形式:

復(fù)制代碼代碼如下:

$('列表').attachEvent('onfocusout',handleMouseOut,true);

如果想要傳遞參數(shù)，可以加個中間函數(shù)，例如

復(fù)制代碼代碼如下:

$('列表').attachEvent('onfocusout',function(event, myparams){handleMouseOut(event, myparams);},true);

FF處理:

復(fù)制代碼代碼如下:

$('列表').addEventListener('focus',handleMouseOver,true);

$('列表').addEventListener('blur',handleMouseOut,true);

希望本文所述對大家的javascript程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

js添加事件的通用方法推薦
下面小編就為大家?guī)硪黄猨s添加事件的通用方法推薦。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
js實現(xiàn)詳情頁放大鏡效果
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)詳情頁放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-10-10
小程序?qū)崿F(xiàn)搜索界面小程序?qū)崿F(xiàn)推薦搜索列表效果
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)搜索界面，小程序?qū)崿F(xiàn)推薦搜索列表效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-05-05
前端axios下載excel文件(二進(jìn)制)的處理方法
新接了項目，遇到這樣的需求，通過后端接口下載excel文件，后端沒有文件地址，返回二進(jìn)制流文件。接下來通過實例代碼給大家分享前端axios下載excel文件(二進(jìn)制)的處理方法，一起看看吧
2018-07-07
JavaScript+html5 canvas繪制繽紛多彩的三角形效果完整實例
這篇文章主要介紹了JavaScript+html5 canvas繪制繽紛多彩的三角形效果,以完整實例形式分析了html5的canvas繪制圖形的相關(guān)技巧,需要的朋友可以參考下
2016-01-01
JavaScript預(yù)解析及相關(guān)技巧分析
這篇文章主要介紹了JavaScript預(yù)解析及相關(guān)技巧,結(jié)合實例形式分析了JavaScript與解析的原理,步驟與相關(guān)技巧,需要的朋友可以參考下
2016-04-04
js仿淘寶放大鏡效果
這篇文章主要為大家詳細(xì)介紹了js仿淘寶放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
JS長整型精度問題實例分析
這篇文章主要介紹了JS長整型精度問題,實例分析了Java項目結(jié)合前臺js腳本出現(xiàn)的長整型精度問題與相應(yīng)的解決方案,具有一定參考借鑒價值,需要的朋友可以參考下
2015-01-01
小程序中監(jiān)聽頁面滾動的幾種方法實例
這段時間接了一個微信小程序項目,從此打開小程序的新世界大門,下面這篇文章主要給大家介紹了關(guān)于小程序中監(jiān)聽頁面滾動的幾種方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04
JavaScript 報表展示實現(xiàn)代碼
以下是從網(wǎng)上找到的一段JavaScript實現(xiàn)圖形報表的代碼，對于想客戶端顯示報表的朋友可以參考下。
2009-12-12