When a click event handler is registered for an html element in javaScript, for example, three parameters are passed to the handler. However, no matter which of the following methods can be used to pass parameters to event processing functions as a java programmer in the last six months, I have written more javaScript code than java code, some time ago, a clerk's management and control system was built for a bank. In terms of the clerk's authorization function, the clerk's authorization needs to consider various factors, for example, the organization permission, clerk type permission, post permission, and business permission, and the intersection or union processing of these permissions must be performed multiple times, so many javascript scripts have to be used to control the page. The implementation of this function module is more responsible for javaScript code than java code.
Now we need to develop a safe deposit box management system for a bank. Its core function is block safe deposit box seat management and safe deposit box management, which is as intuitive and convenient as the C/S architecture, the processing result is displayed to the operator in real time. After several days of thinking and experiment, CSS + javaScript + java is used for development and java is used to process the business logic, CSS is used to express various states of the target object, and javaScript is used to Implement CSS Switching Based on the state transition of the target object.
One difficulty is that when a click event processing function is registered for an html element in javaScript, for example, three parameters are passed to the processing function. However, no matter whether the following method is used (node indicates the node where the event is to be registered, 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 them work. 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 have read a book titled 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 do not understand them, refer to JavaScript. DOM advanced programming, in which section 2.3 of the book describes this method, but I 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 stable degradation if (! IsCompatible () {return false} if (! (Node = $ (node) return false; if (node. addEventListener) {// W3C method (for a bubble event, if false is changed to true, the event is captured) 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, false return false;} is returned ;}; window ['oyf _ mark'] ['addevent'] = addEvent;
The above two functions are slightly modified based on the source code in JavaScript. DOM advanced programming, and added to your own js library for reuse. Next, you can use the following method to register an event for the element and pass parameters to the event processing function:
// Register The onclick event processing function OYF_MARK.addEvent (e, 'click', OYF_MARK.bindFunction (e, getContainerDetail, x, y, containid ));