As a Java programmer in the past six months, the javascript code I wrote is almost more than java code. Some time ago, I built a teller management and control system for a bank. In the function of teller authorization, various factors need to be considered, such as organizational authority, teller type authority, job authority, business authority, etc., and these authority must be intersected or unionized, and many JavaScript must be used on the page to control it. This has caused the JavaScript code to be more responsible for the implementation of this functional module than the Java code.
Now, a safe box management system is developed for a bank. Its core functional blocks, safe box seat management and safe box management, in order to realize the management functions as intuitive and convenient as the C/S architecture, and display the processing results to the operator in real time, after several days of thinking and experimentation, finally, CSS+javaScript+java is used to develop, Java is used to process business logic, CSS is used to express various states of the target object, and JavaScript is used to realize the switching of its CSS according to the state transition of the target object.
A problem encountered in this is that when registering a click event handler for an html element in javascript, for example, passing 3 parameters to the handler. However, no matter using the following method (node means the node to register the event, and fun is the event handling function), it cannot pass parameters to the event handling function:
node.addEventListener('click', fun, false); node.attachevent('onclick', fun);Node['onclick']=funObviously, the method is not good, so please note that the writing method 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 read a book called "JavaScript.DOM Advanced Programming" and found a 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 to your js library. If you don’t understand, you can refer to "JavaScript.DOM Advanced Programming Design". The 2.3 section of the book contains 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['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 (bubble event, if false is changed to true, it is a capture event) node.addEventListener(type, listener, false); return true;}elseif (node.attachEvent) { //MSIE method node['e' + type + listener] = listener;node[type + listener] = function(){node['e' + type + listener](window.event);} node.attachEvent('on' + type, node[type + listener]); return true; }//If neither method is available, return false return false;};window['OYF_MARK']['addEvent'] = addEvent;The above two functions were slightly modified from the source code in "JavaScript.DOM Advanced Programming" and added to one of my own js library for reuse. Next, you can register events to the element and pass parameters to the event handler function in the following way:
//Register the new onclick event handler function OYF_MARK.addEvent(e,'click',OYF_MARK.bindFunction(e,getContainerDetail,x,y,containid));