javascript-如果删除了元素,是否必须清除DOM中的事件？

假设我有一个页面可以动态加载页面.当每个页面加载到DOM中时,该页面中元素的事件都会添加.

如果用户加载另一个页面,则先前加载的元素将从DOM中删除.自然地,由于元素本身不再存在,因此映射到这些元素的所有事件都将停止运行.

但是,它们也被移除了吗？还是它们坐在用户的内存中,占用了空间？

跟进：
是这样定义的函数：

var event = $('foobar').addEvent('click', function() {
    alert(1);
});

可以很容易地用event = null删除事件(或者我可以假设是！)…

但是如果事件未保存到本地变量怎么办？

$('foobar').addEvent('click', function() {
    alert(1);
});

谢谢！

解决方法:

首先.什么？这没有任何意义：

var event = $('foobar').addEvent('click', function() {
    alert(1);
});

它不会像您认为的那样将事件保存到局部变量中.它将对foobar元素对象的引用保存到事件变量中-大多数mootools元素方法将返回该值以进行链接,这是元素本身,而不是方法的结果(除非它是类似“ .getStyle”的吸气剂).

然后,这取决于您如何摆脱元素,接下来会发生什么.首先,element.destroy,在这里找到：https://github.com/mootools/mootools-core/blob/master/Source/Element/Element.js#L728

它将从dom和内存中删除该元素,并以安全的方式将其清空.一旦消失,它将依赖于浏览器的GC进行清理,mootools不会为您为元素本身做任何壮观的GC,但它也会在子节点上运行特殊的clean函数：var children = clean(this ).getElementsByTagName(‘*’);.

clean方法还摆脱了附加到div的子元素的任何事件处理程序和存储.

然后. mootools添加的事件进入元素存储.元素存储在元素原型使用的闭包后面的对象中.为了对其进行测试,我们将重新实现它并使它可打孔(称为存储的全局对象),以便我们可以检查父项消失后引用发生了什么：

http://jsfiddle.net/dimitar/DQ8JU/

(function() {
    var storage = this.storage = {}; // make it puncturable

    var get = function(uid){
        return (storage[uid] || (storage[uid] = {}));
    };

    Element.implement({
       retrieve: function(property, dflt){
            var storage = get($uid(this)), prop = storage[property];
            if (dflt != null && prop == null) prop = storage[property] = dflt;
            return prop != null ? prop : null;
        },

        store: function(property, value){
            var storage = get($uid(this));
            storage[property] = value;
            return this;
        },

        eliminate: function(property){
            var storage = get($uid(this));
            delete storage[property];
            return this;
        }


    });

})();

// read it.
var link = document.getElement("a");
var uid = link.uid; // will reference the mootools unique id for it

// add an event handler
link.addEvent("click", function(e) {
    console.log("hi");
    this.destroy();
    // see what's left in storage for that element.
    console.log(storage[uid]);

    // storage should be empty.
    console.log(storage);
});

link.getFirst().addEvent("mouseenter", function() {
   console.log("over");
});

// check to see if it is there via element storage API.
console.log(link.retrieve("events").click);

// check to see if it's there via our puncture
console.log(this.storage[uid]);

// see all events in storage, inc child element:
console.info(this.storage);

这一切证明的是,mootools会清理您需要清理的所有东西.只要您在所使用的元素上不使用任何内联onclick =东西,就可以了.在mootools的垃圾回收和浏览器之间,您可以轻松找到自己.请注意,如果回调是匿名的,则可以在单个元素上堆叠多个事件.

标签：mootools,javascript
来源： https://codeday.me/bug/20191207/2087164.html