如果dom元素具有指向关闭的指针，那么如果我从页面中删除dom元素，是否会导致内存泄漏？

Question

For example code like this^

function test_mem(elm, data){
    var data_storage = data;

    function handle_input(event){
        console.log(data_storage);
    };

    function update_data(data) {
        data_storage = data;
    }

    function clear_events() {
        elm.removeEventListener('input', handle_input);
        elm.fnc_ptr = undefined;
    }

    if (elm.fnc_ptr !== undefined){
        elm.fnc_ptr.update_data(data);
    } else {
        elm.addEventListener('input', handle_input);

        elm.fnc_ptr = {
            'clear_events' : clear_events,
            'update_data' : update_data
        }
    }
}

var elm = document.getElementsByClassName('test-input')[0];
test_mem(elm, [1,2,3,54,5]);

will this closure lead to memory leak, if I delete elm from dom tree? I think this code not lead to memory leak, but may be I lost sight of something.

Answer 1

While modern browsers will most certainly handle this, an arguably better way to associate data with an element is to an object that conforms to the Event Listener Interface .

This lets you bind an object as the event handler instead of a function. The requirement is that the object has a handleEvent() method. When the event occurs, the handleEvent() gets invoked with this pointing to the object you bound, which will hold the stored data.

You can still access the element via event.currentTarget .

function TestMem(elm, data){
    this.data_storage = data;

    if (elm.has_handler !== undefined) {
        this.update_data(data);
    } else {
        elm.addEventListener('input', this);
        elm.has_handler = true;
    }
}

// Implement the Event Listener interface
TestMem.prototype.handleEvent = function(event) {
    if (event.type === "input") {
        this.handle_input(event);
    }
};

TestMem.prototype.handle_input = function(event) {
    console.log(this.data_storage);
};

TestMem.prototype.update_data = function(data) {
    this.data_storage = data;
};

TestMem.prototype.clear_events = function(event) {
    event.currentTarget.removeEventListener('input', this);
    this.has_handler = undefined;
}


var elm = document.getElementsByClassName('test-input')[0];

new TestMem(elm, [1,2,3,54,5]);

Now there's an association between the element and the object when the event happens, and there's no closure problems at all.