卡卡網(wǎng)

jQuery $('document').on() 和 $('body').on() 是兩個很常用的方法，它們之間有什么區(qū)別呢？在實際編程中我們該如何選擇呢？本文介紹一下在事件委托中使用 body 或 document 作為綁定元素之間的主要區(qū)別。

$('document').on() 和 $('body').on()

使用 body 作為委托

為獲得最佳性能，請在盡可能靠近目標(biāo)元素的文檔位置附加委托事件。避免過度使用 document 或 document.body 來處理大型文檔上的委托事件。

HTML 處理拖放事件：

$('body').on('dragover', filesDragged).on('drop', filesDropped);

使用 document 作為委托

在加載任何其他 HTML 之前，文檔元素在文檔的頭部可用，因此可以安全地在那里附加事件，而無需等待文檔準(zhǔn)備就緒。

默認(rèn)情況下，大多數(shù)事件從原始事件目標(biāo)冒泡到文檔元素。

關(guān)于速度

（↑點擊圖片放大↑）

可以看到，使用 document 比使用 body 作為事件委托要快。

（↑點擊圖片放大↑）

同樣，文檔性能更好，但 .on() 和 .delegate() 之間沒有太大區(qū)別——后者調(diào)用前者。

jQuery 源。

delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},

結(jié)論

正確用法

使用

$("#commentForm").on("click", ".addNew", addComment).

代替

$("body").on("click", "#commentForm .addNew", addComment)

什么時候應(yīng)該使用事件委托？

1. 當(dāng)你為需要相同功能的更多元素綁定一個公共處理程序時。（例如：表格行懸停）

* 在示例中，如果你必須使用直接綁定綁定所有行，你最終會為該表中的 n 行創(chuàng)建 n 個處理程序。通過使用委托方法，你最終可以在 1 個簡單的處理程序中處理所有這些。

2. 當(dāng)你在 DOM 中更頻繁地添加動態(tài)內(nèi)容時（例如：從表中添加/刪除行）

為什么不應(yīng)該使用事件委托？

1. 與將事件直接綁定到元素相比，事件委托更慢。

* 它比較它碰到的每個氣泡上的目標(biāo)選擇器，比較的代價是昂貴的，因為它很復(fù)雜。

2. 無法控制事件冒泡，直到它遇到它所綁定的元素。

PS：即使對于動態(tài)內(nèi)容，如果在內(nèi)容插入 DOM 后綁定處理程序，你也不必使用事件委托方法。（如果添加的動態(tài)內(nèi)容不經(jīng)常刪除/重新添加）

標(biāo)簽: JQuery