Regarding the unsuccessful problem of passing parameters in javaScript registration click event

When registering a click event handler function for an html element in javaScript, for example, pass 3 parameters to the handler function. However, no matter the following method is used, parameters cannot be passed to the event processing function

As a java programmer in the past six months, I have written more javaScript code than java code. Some time ago, it was for a bank. To build a teller management and control system, in terms of teller authorization, various factors need to be considered for teller authorization, such as organizational authority, teller type authority, position authority, business authority, etc., and these authority must be done multiple times. The intersection or union processing requires a lot of javascript to be used on the page for control. This has resulted in a situation where the javaScript code is more responsible for the implementation of this functional module than the java code.

Now we need to develop a safe deposit box management system for a bank. Its core function blocks are safe deposit box management and safe deposit box management. In order to achieve management functions that are as intuitive and convenient as the C/S architecture, and The processing results are displayed to the operator in real time. After several days of thinking and experimentation, CSS+javaScript+java was finally used for development, java was used to process the business logic, CSS was used to express various states of the target object, and javaScript was used to According to the state transition of the target object, its CSS switching is implemented.

I encountered a problem here, that is, when registering a click event processing function for an html element in JavaScript, for example, passing 3 parameters to the processing function. However, no matter the following method is used (node ​​represents the node to register the event, fun is the event processing function), parameters cannot be passed to the event processing function:

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

Obviously, none of the methods work. Please note that the writing is incorrect:

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 "JavaScript.DOM Advanced Programming". Found the solution on 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", section 2.3 of the book has an explanation of this method, but I have added some changes:

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[&#39;OYF_MARK&#39;][&#39;bindFunction&#39;] = bindFunction; 
function addEvent(node, type, listener){
//使用前面的方法检查兼容性以保证平稳退化
if (!isCompatible()) {
return false
} 
if (!(node = $(node))) 
return false;
if (node.addEventListener) { 
//W3C的方法(冒泡事件，如果将false改为true，则为捕获事件） 
node.addEventListener(type, listener, false); 
return true;
}
else
if (node.attachEvent) { 
//MSIE的方法 
node[&#39;e&#39; + type + listener] = listener;
node[type + listener] = function(){
node[&#39;e&#39; + type + listener](window.event);
} 
node.attachEvent(&#39;on&#39; + type, node[type + listener]); 
return true; 
}
//若两种方法都不具备则返回false 
return false;
};
window[&#39;OYF_MARK&#39;][&#39;addEvent&#39;] = addEvent;

The above two functions are based on " The source code in "JavaScript.DOM Advanced Programming" is slightly modified and added to a js library of your own for reuse. Next, you can use the following method to register events for elements and pass parameters to the event processing function:

//注册新的onclick事件处理函数
OYF_MARK.addEvent(e,'click',OYF_MARK.bindFunction(e,getContainerDetail,x,y,containid));

For more related articles about the unsuccessful problem of passing parameters in javaScript registration click event, please pay attention to related articles. PHP Chinese website!