页面加载时调用函数

Question

for (var key in obj[i]) {
    dataDump[key] = textField.value;
    var callback = function(zeKey){
       return function(e){
          dataDump[zeKey] = e.source.value;
       }; 
    }(key);
    textField.addEventListener('change', callback);
}

When I load the window, this function gets called automatically, which I don't want and instead I want this to be called only when I do a change.

The main point is calling function(zeKey){...}(key) . When you do so, key, which is a string is copied as a parameter (zeKey) to your anonymous function.

Answer 1

The following

var callback = function(zeKey){
    return function(e){
        dataDump[zeKey] = e.source.value;
    }; 
}(key);

1. Calls the anonymous function with argument zeKey .
2. This anonymous function returns another function. This returned function is assigned to the callback.

If 1 what you mean by "the function is getting called" then this is expected behavior.

This entire code should be called only after DOM is ready. Place all these in a function and make sure the function is called only on window.onload or (jQuery's) .ready()

The function returned by the function will be called only during the callback.

Answer 2

Add these code once dom is created. If above code is inside a function, attach to window.load or write these code at the end of page.