jQuery應用事件處理程序的最佳方式

我正在處理具有20列和100多行的網格。每列都有一個輸入字段。現在我想把eventHandlers放在輸入字段上，如change和keyup，focus，等等。所以可以有20 * 100個事件= 2000！jQuery應用事件處理程序的最佳方式

這樣做的最好方法是什麼？我讀過關於eventHandlers和內存問題的一些信息。

這是我覺得我應該這樣做：

$("#grid input").each(function() { 
    $(this).keyup(function() { 
     // 
    }); 
    $(this).change(function() { 
     // 
    }); 
});

或者這是做到這一點的最好方法是什麼？

$("#grid").keyup(function() { 
     // 
});

來源

2016-11-23 mr r.

您正在尋找事件代表團。

$("#grid").on("change", "input", function() { 
    // Handle the event here, `this` refers to the input where it occurred 
});

附接一個處理程序（上#grid），只有當事件通過第二選擇器相匹配的元件通過其中的jQuery然後觸發。它調用處理程序，就好像處理程序已連接到實際的input。即使像focus這樣的事件本身並不會通過jQuery的機制來支持。

更多在the on documentation。

來源

2016-11-23 20:17:22

快速回答，+鏈接文檔。感謝您成爲冠軍。 –

超級回答！緊湊和重點。 –

我建議使用事件代表團，就像這樣：

$("#grid").on("keyup", "input", function() { 
    ... 
});

而不是增加一個監聽每input，你只需要添加一個向#grid。

按照這個偉大的答案：What is DOM event delegation?

另一個好處事件代表團是由事件偵聽器所使用的總內存佔用量下降（因爲事件綁定的數量下降）。對於經常卸載的小頁面（即，用戶經常導航到不同頁面）可能沒有太大區別。但對於長期使用的應用程序來說，這可能很重要。

當從DOM中移除的元素仍然聲明內存（即它們泄露）時，有一些真正難以追蹤的情況，並且這種泄漏的內存通常與事件綁定有關。通過事件代表團，您可以自由地銷燬子元素，而無需忘記「解除綁定」他們的事件偵聽器（因爲偵聽器位於祖先上）。這些類型的內存泄漏可以被包含（如果不能消除的話，這有時候很難做到，IE我在看你）。

來源

2016-11-23 20:16:50 Santi

jQuery應用事件處理程序的最佳方式

回答

相關問題