實時附加事件處理程序

我將一個事件處理程序附加到表格單元格。該表格是在點擊搜索按鈕後生成的。搜索按鈕還會生成一個鏈接，當點擊該鏈接時，會打開一個模式彈出窗口，其中有另一個表格。模式彈出窗口中的表格也應該具有與其單元格相同的事件處理程序。實時附加事件處理程序

是不是沒事做：

$(document).on('mouseenter mouseleave', '.cell-with-action', function(e){ 
    var action = $(this).find('.action'); 

    if(e.type == 'mouseenter'){ 
     //do something 
    } 
    else{ 
     //do something else 
    } 
});

還是更附上它被點擊搜索按鈕和鏈接按鈕時？請問這有什麼不同：

$('.table-with-action').on('mouseenter mouseleave', '.cell-with-action', function(e){ 
    var action = $(this).find('.action'); 

    if(e.type == 'mouseenter'){ 
     //do something 
    } 
    else{ 
     //do something else 
    } 
});

謝謝。

來源

2013-06-19 dork

2個選項（對於您的問題，而不是您的代碼）之間的主要區別在於，第一個將在文檔加載時與您單擊搜索按鈕時進行加載。

文檔加載時做這件事的好處是，您不必檢查它是否在您附加它之前已經加載，就像您在搜索時單擊它一樣，因爲您隨後會得到一個新事件附加每次點擊&所以你會在事件被觸發時多次調用相同的函數。

如果你有一個快速加載的頁面（即不是很大/動態），那麼使用第一個選項是有意義的。否則使用第二個IMO。

至於你的代碼：第一個片段附加到文檔，而第二個附加到表。所以取決於你有多少這些表可能會導致衝突。此外，對於更具體的選擇器.table-with-action，該事件在執行之前不必像DOM（文檔）那樣冒泡到DOM樹上。更重要的是，不相關元素上的事件根本不會到達處理程序，這意味着jQuery不必過濾無關的事件（如Jan所述）。

根據您的要求，您可能還想返回false或使用e.stopPropagation或e.stopDefault。

來源

2013-06-19 08:11:46 Precastic

「事件不必像DOM樹一樣冒泡」 - 更重要的是，不相關元素上的事件根本不會到達處理程序，而不是被jQuery過濾掉。 –

@JanDvorak好點 - 會增加 – Precastic

-1

你應該罰款與你的第一個例子，但是您可能希望將事件處理程序添加到<body>元素，而不是文檔，並與元素類型限定類（即：「表td.cell - 與 - 行動'）出於性能原因。

來源

2013-06-19 08:09:22 Derek

爲什麼連接到'body'比連接'document'還要好？ –

爲什麼'table td.cell-with-action'會比'.cell-with-action'更快？如果你這樣做，瀏覽器必須向上遍歷！ –

除非您使用元素類型對其進行限定，否則瀏覽器必須查看每一種元素才能找到匹配「.cell-with-action」的任何元素。事先包括'table td'確保它只在具有該類名的表格單元格的表格中查找，並且可以顯着更快，具體取決於DOM中元素的數量。 – Derek

實時附加事件處理程序

回答

相關問題