[英]Binding events to DOM for Single Page Applications with JQuery and JavaScript
我正在使用JavaScript和JQuery设计一个新的单页应用程序。 但是,我最大的担心是通过选择器将事件(例如click等)绑定到DOM元素,一旦加载了新的“视图”(通过AJAX调用创建新页面),这些元素就会被删除。
通过用新内容替换主视图DIV,最简单的实现SPA而不造成内存泄漏和放慢页面速度的方法是什么?
我知道这是一个古老的问题,但是我认为这是应该得到的答案,因此您可以开始:
有两种方法可以解决此问题(这是一个广泛的问题,因此这里有一个广泛的答案):
方式:
// 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);
}
老实说,我更喜欢第一种方法,因为它减少了代码,我可以使用无名函数(匿名函数)-我知道,很重要,但是仍然...
还有第三种方法,就是不用担心删除事件监听器。 您可以在这里阅读有关内容。
同样,这是一个非常广泛的答案,因为它是一个广泛的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.