An unsuccessful problem with javaScript registering the click event to pass parameters

In recent half a year as a Java programmer, I write the javaScript code is much faster than Java code, recently is to give a bank as a teller control system, the teller authorized this function, as a result of the teller authorization needs to consider various factors, such as permissions, cabinet type permissions, post authority, business permission, etc., and for these permissions to do multiple intersection or and set processing, have a lot of javaScript to control on a page. This results in a situation where javaScript code is more responsible for the implementation of this functional module than Java code.

And now for a bank to develop a safe management system, its core function block box seat management and safekeeping, to realize the management function similar to C/S architecture as intuitive, convenient, and the results of real-time displayed to the operator, after a few days to think and experiment, finally using CSS + javaScript + Java development, using Java to handle the business logic, with CSS used to represent the various state of the target object, use javaScript to according to the target object state transitions, to achieve its CSS switch.

One of the difficulties was registering a click event handler for an HTML element in javaScript, such as passing three arguments to the handler. However, neither of the following methods (node represents the node to register the event, and fun is the event handler) can pass parameters to the event handler:

node.addEventListener('click', fun, false); 
node.attachevent('onclick', fun);
Node['onclick']=fun

Obviously not in the way, notice that the way is not correct:

node.addEventListener('click', fun(arg1,arg2,arg3), false); 
node.attachevent('onclick', fun(arg1,arg2,arg3)); 
Node['onclick']=fun(arg1,arg2,arg3)

Fortunately, I have read a book named "advanced programming of JavaScript.DOM" and found the solution in this book. First, write a method:

function bindFunction(obj, func){ 
var args = []; 
for(var i =2; i < arguments.length; i++) { 
args.push(arguments[i]);
} 
return function(){ 
func.apply(obj, args);
}; 
};

Then add the following two methods in your js library. If you don't understand anything, you can refer to "JavaScript.DOM advanced programming".

function bindFunction(obj, func){ 
var args = []; 
for(var i =2; i < arguments.length; i++) {
args.push(arguments[i]);
}
return function(){
func.apply(obj, args);
};
}; 
window['OYF_MARK']['bindFunction'] = bindFunction; 
function addEvent(node, type, listener){
//Use the previous method to check compatibility to ensure smooth degradation
if (!isCompatible()) {
return false
} 
if (!(node = $(node))) 
return false;
if (node.addEventListener) { 
//W3C method (bubbling event, capture event if false is changed to true)
node.addEventListener(type, listener, false); 
return true;
}
else
if (node.attachEvent) { 
//The method of MSIE
node['e' + type + listener] = listener;
node[type + listener] = function(){
node['e' + type + listener](window.event);
} 
node.attachEvent('on' + type, node[type + listener]); 
return true; 
}
//Returns false if neither method is available
return false;
};
window['OYF_MARK']['addEvent'] = addEvent;

The above two functions for myself according to "JavaScript.DOM advanced programming" in the source code slightly modified, added to their own js library, for reuse. You can then register events for the element and pass arguments to the event handler in the following manner:

//Register the new onclick event handler
OYF_MARK.addEvent(e,'click',OYF_MARK.bindFunction(e,getContainerDetail,x,y,containid));