欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談JavaScript之事件綁定

 更新時間:2013年07月08日 09:52:18   作者:  
關于 JavaScript 的事件綁定在網(wǎng)上已經(jīng)有不少相關的資料了,今天這篇文章也是在被同事問及的時候才順便把它記錄下來,算是 JavaScript 事件綁定中的一個小技巧,如果能在工作中善加利用,會有出其不意的效果
其實沒有什么新的知識點,只是為了方便其他有需要的朋友們翻閱,對自己而言也算是一個積累,所以只能算是閑談 JavaScript,老鳥們可以盡情飄過。
在進入正題之前,先提個問題熱熱身吧。
現(xiàn)在有如下 HTML 結構:
復制代碼 代碼如下:

<div id="wrap">
 <input type="button" value="按鈕一" />
 <input type="button" value="按鈕二" />
 <input type="button" value="按鈕三" />
 <input type="button" value="按鈕四" />
 <input type="button" value="按鈕五" />
</div>

以及如下 JavaScript 代碼:
復制代碼 代碼如下:

var wrap = document.getElementById('wrap'),
    inputs = wrap.getElementsByTagName('input');

for (var i = 0, l = inputs.length; i < l; i++) {
    inputs[i].onclick = function () {
        alert(i);
    }
}

請問,這樣執(zhí)行的結果是什么?
/***************************分割線***************************/
如果你的回答是“點擊按鈕時, alert 當前按鈕的索引值 i”,那你就中了我的圈套了。大家不妨試試,無論你點擊哪個按鈕,它都會alert(5)。

這個看似理所當然的結果為什么會和實際情況不同呢?其實也是很好理解的。
因為 onclick 只是事件綁定,而不是執(zhí)行,當我們執(zhí)行 onclick 事件的時候,這時的 i 已經(jīng)是循環(huán)以后的值了,照這樣看,每個按鈕都alert(5) 也就不足為奇了。

那么,如果我們要怎么實現(xiàn)“點擊按鈕時,alert 當前按鈕的索引值 i”呢?這里就要用到 JavaScript 中暗藏玄機的一個概念“閉包”。我們可以用閉包的方式改寫以上 JS,把 for 循環(huán)中的 i 值保存在內(nèi)存中,代碼如下:
復制代碼 代碼如下:

var wrap = document.getElementById('wrap'),
    inputs = wrap.getElementsByTagName('input');

for (var i = 0, l = inputs.length; i < l; i++) {
    (function (cur) {
        inputs[cur].onclick = function () {
            alert(cur);
        }
    })(i)
}

再試試效果?確實能 alert 出相應的索引值了,不過至此為止還只是開胃菜,正題才剛剛開始!
以上的方法,我們是通過循環(huán) + 閉包給 button 按鈕上綁定事件,我們知道,在 JavaScript 中函數(shù)也是對象,對象就會占用內(nèi)存,現(xiàn)在的例子中只有 5 個按鈕,或許你會認為這樣的性能開銷可以忽略不計,但是如果當我們有 50個,甚至 500 個按鈕的時候,IE 已經(jīng)哭了,當有更多其他性能隱患并發(fā)時,所有的瀏覽器都哭了。

回到剛才的例子,我們可以用“事件委托”的方法來解決這個因綁定事件隨著按鈕增加而可能導致的性能問題。原理很簡單,利用 Javascript 的事件冒泡,我們可以把事件的綁定從按鈕移到它們的父級元素上,不管按鈕有多少,它們只有一個共同的父級元素,那樣我們只需要綁定一次事件就可以了。
代碼如下:
復制代碼 代碼如下:

var wrap = document.getElementById('wrap'),
    inputs = wrap.getElementsByTagName('input');

wrap.onclick = function (ev) {
    var ev = ev || window.event,
    target = ev.target || ev.srcElement;
    for (var i = 0, l = inputs.length; i < l; i++) {
        if (inputs[i] === target) {
            alert(i)
        }
    }
}

至此,正餐完畢,我們還可以再深入一下,來些餐后甜點。
除了在性能上,事件委托比閉包的事件綁定更有優(yōu)勢以外,事件委托還無需顧及子元素(即被綁定事件的元素)的數(shù)量。比如,我們在 onclick 事件綁定以后,增加一個按鈕:
復制代碼 代碼如下:

var newInput = document.createElement('input');
newInput.setAttribute('type', 'button');
newInput.setAttribute('value', '按鈕六');
wrap.appendChild(newInput);

同樣在最后加了這段代碼的閉包方式和事件委托方式,我們可以看到,閉包實現(xiàn)的事件綁定中點擊“按鈕六”毫無效果,但是在事件委托中實現(xiàn)的事件綁定點擊“按鈕六”則會有 alert。相反,如果我們要刪除一個按鈕,閉包的方式仍會在內(nèi)存中保存已刪除按鈕的 onclick 事件(除非手動設為 null),事件委托則不會對內(nèi)存造成多余的負擔,就為這個原因,我們也應該多加利用事件委托的方式來綁定同一層級的多個元素。

相關文章

  • window.showModalDialog()返回值的學習心得總結

    window.showModalDialog()返回值的學習心得總結

    本篇文章主要介紹了window.showModalDialog()返回值的學習心得。需要的朋友可以過來參考下,希望對大家有所幫助
    2014-01-01
  • JS跨瀏覽器解析XML應用過程詳解

    JS跨瀏覽器解析XML應用過程詳解

    這篇文章主要介紹了JS跨瀏覽器解析XML應用過程詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2020-10-10
  • 微信小程序實現(xiàn)折疊展開效果

    微信小程序實現(xiàn)折疊展開效果

    這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)折疊展開效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-07-07
  • js定時器實例分享

    js定時器實例分享

    本篇文章主要介紹了js 定時器的語法、實例、與實現(xiàn)代碼分析。具有很好的參考價值,需要的朋友一起來看下吧
    2016-12-12
  • JS Select下拉框(支持輸入模糊查詢)

    JS Select下拉框(支持輸入模糊查詢)

    這篇文章主要為大家詳細介紹了JS Select下拉框的相關資料,支持輸入模糊查詢,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-02-02
  • raphael.js繪制中國地圖 地圖繪制方法

    raphael.js繪制中國地圖 地圖繪制方法

    在本文中給大家分享如何使用raphael.js來完成地圖交互,raphael.js是一個很小的javascript庫,它可以在網(wǎng)頁中實現(xiàn)繪制各種矢量圖、各類圖表、以及圖像裁剪、旋轉、運動動畫等等功能,需要的朋友可以參考下
    2014-02-02
  • 淺談addEventListener和attachEvent的區(qū)別

    淺談addEventListener和attachEvent的區(qū)別

    下面小編就為大家?guī)硪黄獪\談addEventListener和attachEvent的區(qū)別。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-07-07
  • 微信小程序列表中item左滑刪除功能

    微信小程序列表中item左滑刪除功能

    這篇文章主要介紹了微信小程序列表中item左滑刪除功能,本文分步驟給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-11-11
  • 微信小程序簡單實現(xiàn)form表單獲取輸入數(shù)據(jù)功能示例

    微信小程序簡單實現(xiàn)form表單獲取輸入數(shù)據(jù)功能示例

    這篇文章主要介紹了微信小程序簡單實現(xiàn)form表單獲取輸入數(shù)據(jù)功能,涉及微信小程序針對form表單的事件綁定及數(shù)據(jù)獲取等相關操作技巧,需要的朋友可以參考下
    2017-11-11
  • 6種JavaScript繼承方式及優(yōu)缺點(小結)

    6種JavaScript繼承方式及優(yōu)缺點(小結)

    這篇文章主要介紹了6種JavaScript繼承方式及優(yōu)缺點(小結),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-02-02

最新評論