使用JQuery和JavaScript將事件綁定到單頁應用程序的DOM

我正在用JavaScript和JQuery設計一個新的單頁應用程序。不過，我最關心的是通過選擇器綁定事件（如點擊等）到DOM元素，一旦加載新的「視圖」（通過AJAX調用創建新頁面），將刪除這些元素。使用JQuery和JavaScript將事件綁定到單頁應用程序的DOM

什麼是最簡潔的方式來實現一個SPA，而不會產生內存泄漏，並通過用新內容替換主視圖DIV來降低頁面的速度？

來源

2013-06-25 kidalex

只要你一直使用jQuery，你應該沒有問題。意思是，如果你想刪除一個部分並替換它，確保你使用jQuery方法（比如'.remove（）'或'.replaceWith（）'），因爲它們清理了jQuery存儲的關於它們的內容。當人們決定使用jQuery添加事件處理程序時，人們會遇到麻煩，然後使用'.innerHTML =「whatever」;'或'parentElement.removeChild（el）;'來刪除元素，因爲它不會給jQuery一個機會清理 – Ian

您可能會想要使用委派的事件：http://api.jquery.com/on/ – cfs

同意兩個：使用「on」並使用「remove」。但不知何故，我覺得還有更多。我的意思是人們爲SPA創建整個框架！或者這是大驚小怪？ – kidalex

我知道這是一個老問題，但我認爲它應該得到一個答案，以便在這裏你去：

有一對夫婦的方式去了解這一點（這是一個有點寬泛的問題所以這裏是一個位廣闊的答案）：

第一種方式：

// This is in plain JS, but the jQuery equivalent is: 
// document.on('click', '#my-id, function(e) { /* Function stuff */ }); 
document.addEventListener('click' function(e) { 
    if (e.target.id === 'my-id') { 
    // Function stuff 
    } 
});

做這種方式的好處是，你永遠不必刪除事件偵聽器，因爲總是會有一個文件。你甚至可以通過使用類來建立一個「階段」系統（我稱他們爲舞臺，我不知道他們是否有更好的詞），即你的導航鏈接都有類nav-item，並且在你的事件監聽器中能有這樣的代碼：

// jQuery equivalent of if statement is: if ($(this).is('nav-item')) {} 
if (e.target.className.match(/nav-item/)) { // You could also use .include(), etc. 
    switch(e.target.id) { 
    case 'item1': 
     loadPageOneFunction(); // Or whatever 
     break; 
    case 'item2': 
     loadPageTwoFunction(); // Or whatever 
     break; 
    } 
}

第二種方式

// Note how I named the function 
document.getElementById('my-id').addEventListener('click', function clickFunction(e) { 
    myAjaxFunction(e.target); // Or whatever 
}); 
// Later... 
if (pageToLoad === 'page2') { 
    // You are required to name the function you are removing. 
    document.getElementById('my-id').removeEventListener('click', clickFunction); 
    document.getElementById('my-page2-id').addEventListener('click', clickFunction); 
}

老實說，我更喜歡第一種方式，因爲它是更少的代碼，我可以使用匿名函數（匿名函數） - 我知道，大不了，但還是...

還有第三種方法，就是不用擔心刪除事件監聽器。你可以閱讀關於here。

再次，這是一個廣泛的回答，作爲其廣泛的問題。

來源

2016-09-16 05:58:23 4lackof

使用JQuery和JavaScript將事件綁定到單頁應用程序的DOM

回答

相關問題